H5-Merchant/components/editor.vue

<template>
  <view class="container">
    <view class="page-body">
      <view class="wrapper">
        <view class="toolbar" @tap="format">
          <view
            :class="formats.bold ? 'ql-active' : ''"
            class="iconfont icon-zitijiacu"
            data-name="bold"
          >
          </view>
          <view
            :class="formats.italic ? 'ql-active' : ''"
            class="iconfont icon-zitixieti"
            data-name="italic"
          >
          </view>
          <view class="iconfont icon-charutupian" @tap="insertImage"></view>
          <view
            :class="formats.underline ? 'ql-active' : ''"
            class="iconfont icon-zitixiahuaxian"
            data-name="underline"
          ></view>
          <view
            :class="formats.strike ? 'ql-active' : ''"
            class="iconfont icon-zitishanchuxian"
            data-name="strike"
          ></view>
          <view
            :class="formats.align === 'left' ? 'ql-active' : ''"
            class="iconfont icon-zuoduiqi"
            data-name="align"
            data-value="left"
          ></view>
          <view
            :class="formats.align === 'center' ? 'ql-active' : ''"
            class="iconfont icon-juzhongduiqi"
            data-name="align"
            data-value="center"
          ></view>
          <view
            :class="formats.align === 'right' ? 'ql-active' : ''"
            class="iconfont icon-youduiqi"
            data-name="align"
            data-value="right"
          ></view>
          <view
            :class="formats.align === 'justify' ? 'ql-active' : ''"
            class="iconfont icon-zuoyouduiqi"
            data-name="align"
            data-value="justify"
          ></view>
          <view
            :class="formats.lineHeight ? 'ql-active' : ''"
            class="iconfont icon-line-height"
            data-name="lineHeight"
            data-value="2"
          ></view>
          <view
            :class="formats.letterSpacing ? 'ql-active' : ''"
            class="iconfont icon-Character-Spacing"
            data-name="letterSpacing"
            data-value="2em"
          ></view>
          <view
            :class="formats.marginTop ? 'ql-active' : ''"
            class="iconfont icon-722bianjiqi_duanqianju"
            data-name="marginTop"
            data-value="20px"
          ></view>
          <view
            :class="formats.previewarginBottom ? 'ql-active' : ''"
            class="iconfont icon-723bianjiqi_duanhouju"
            data-name="marginBottom"
            data-value="20px"
          ></view>
          <view class="iconfont icon-clearedformat" @tap="removeFormat"></view>
          <view
            :class="formats.fontFamily ? 'ql-active' : ''"
            class="iconfont icon-font"
            data-name="fontFamily"
            data-value="Pacifico"
          ></view>
          <view
            :class="formats.fontSize === '24px' ? 'ql-active' : ''"
            class="iconfont icon-fontsize"
            data-name="fontSize"
            data-value="24px"
          ></view>

          <view
            :class="formats.color === '#0000ff' ? 'ql-active' : ''"
            class="iconfont icon-text_color"
            data-name="color"
            data-value="#0000ff"
          ></view>
          <view
            :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''"
            class="iconfont icon-fontbgcolor"
            data-name="backgroundColor"
            data-value="#00ff00"
          ></view>
          <view class="iconfont icon-date" @tap="insertDate"></view>
          <view
            class="iconfont icon--checklist"
            data-name="list"
            data-value="check"
          ></view>
          <view
            :class="formats.list === 'ordered' ? 'ql-active' : ''"
            class="iconfont icon-youxupailie"
            data-name="list"
            data-value="ordered"
          ></view>
          <view
            :class="formats.list === 'bullet' ? 'ql-active' : ''"
            class="iconfont icon-wuxupailie"
            data-name="list"
            data-value="bullet"
          ></view>
          <view class="iconfont icon-undo" @tap="undo"></view>
          <view class="iconfont icon-redo" @tap="redo"></view>
          <view
            class="iconfont icon-outdent"
            data-name="indent"
            data-value="-1"
          ></view>
          <view
            class="iconfont icon-indent"
            data-name="indent"
            data-value="+1"
          ></view>
          <view class="iconfont icon-fengexian" @tap="insertDivider"></view>

          <view
            :class="formats.header === 1 ? 'ql-active' : ''"
            class="iconfont icon-format-header-1"
            data-name="header"
            :data-value="1"
          ></view>
          <view
            :class="formats.script === 'sub' ? 'ql-active' : ''"
            class="iconfont icon-zitixiabiao"
            data-name="script"
            data-value="sub"
          ></view>
          <view
            :class="formats.script === 'super' ? 'ql-active' : ''"
            class="iconfont icon-zitishangbiao"
            data-name="script"
            data-value="super"
          ></view>
          <view class="iconfont icon-shanchu" @tap="clear"></view>
          <view
            :class="formats.direction === 'rtl' ? 'ql-active' : ''"
            class="iconfont icon-direction-rtl"
            data-name="direction"
            data-value="rtl"
          ></view>
        </view>
        <view class="editor-wrapper">
          <editor
            id="editor"
            class="ql-container"
            :placeholder="placeholder"
            @statuschange="onStatusChange"
            :show-img-resize="true"
            @ready="onEditorReady"
            @input="getCtx"
          ></editor>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { baseURL, phpToken } from "@/commit/requestPhp.js";
export default {
  props: {
    value: {
      type: String,
      default: "",
    },
    placeholder: {
      type: String,
      default: "请输入商品详情信息...",
    },
    readOnly: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      richText: "",
      formats: {},
      editorCtx: null,
      // 新增：记录光标位置
      cursorPosition: 0,
      // 新增：记录当前选中的文本
      selectedText: "",
    };
  },
  watch: {
    value: {
      handler(val,old) {
         this.richText = val;
         console.log(val)
        // this.setHTMLContent();
      },
    },
  },
  mounted() {
    this.richText = this.value;
    if (this.richText) {
      this.setHTMLContent();
    }
  },
  methods: {
    setHTMLContent(data) {
      if (this.editorCtx) {
        this.editorCtx.setContents({
          html:data|| this.richText,
        });
      }
    },
    readOnlyChange() {
      this.readOnly = !this.readOnly;
    },
    async onEditorReady() {
      // 富文本节点渲染完成
      await this.$nextTick();
      const query = uni.createSelectorQuery().in(this);
      query
        .select("#editor")
        .context((res) => {
          this.editorCtx = res.context;
          console.log(this.richText, "this.richTextthis.richText");
          if (this.richText) {
            this.setHTMLContent();
          }
        })
        .exec();
    },
    // 失去焦点时，获取富文本的内容
    getCtx(e) {
      this.richText = e.detail.html;
      this.$emit("input", e.detail.html);
      // 记录光标位置
      // this.cursorPosition = this.editorCtx.getSelection().index;
      // 记录当前选中的文本
      // this.selectedText = this.editorCtx.getSelectedText();
    },
    undo() {
      this.editorCtx.undo();
    },
    redo() {
      this.editorCtx.redo();
    },
    format(e) {
      let { name, value } = e.target.dataset;
      if (!name) return;
      // console.log('format', name, value)
      this.editorCtx.format(name, value);
    },
    onStatusChange(e) {
      console.log(e, "onStatusChange");
      e.preventDefault();
      e.stopPropagation();
      const formats = e.detail;
      this.formats = formats;
    },
    insertDivider() {
      this.editorCtx.insertDivider({
        success: function () {
          console.log("insert divider success");
        },
      });
    },
    clear() {
      this.editorCtx.clear({
        success: function (res) {
          console.log("clear success");
        },
      });
    },
    removeFormat() {
      this.editorCtx.removeFormat();
    },
    insertDate() {
      const date = new Date();
      const formatDate = `${date.getFullYear()}/${
        date.getMonth() + 1
      }/${date.getDate()}`;
      this.editorCtx.insertText({
        text: formatDate,
      });
    },
    insertImage() {
      var that = this;
      uni.chooseImage({
        count: 1, // 最多可以选择的图片张数，默认9
        // sizeType: ["compressed"], // original 原图，compressed 压缩图，默认二者都有
        sourceType: ["album", "camera"], // album 从相册选图，camera 使用相机，默认二者都有
        async success(res) {
          console.log("选择图片成功");
          console.log(res);
          const tempFiles = res.tempFiles;
          const data = await that.uploadFileData(tempFiles[0]);
          that.editorCtx.insertImage({
            width: "50%",
            height: "20%",
            src: data,
          });
        },
      });
    },
    async uploadFileData(files) {
      uni.showLoading({
        title: "上传中",
        mask: true,
      });
      const uploadUrl = `${baseURL}/mer/upload/image/0/file`;
      return new Promise((resolve, reject) => {
        uni.uploadFile({
          url: uploadUrl,
          file: files,
          name: "file",
          header: {
            "X-Token": phpToken,
            // 'Content-Type': "application/json;charset=UTF-8",
          },
          success: (res) => {
            const data = JSON.parse(res.data);
            if (data.status === 200) {
              uni.showToast({
                title: "上传成功",
                icon: "success",
              });
              this.paths = data.data.src || "";
            } else {
              uni.showToast({
                title: "上传失败",
                icon: "error",
              });
              this.paths = "";
            }
            resolve(this.paths);
            console.log("上传成功", JSON.parse(res.data));
            uni.hideLoading();
            uni.hideToast();
          },
          fail: (err) => {
            console.error("上传失败", err);
            this.paths = "";
            resolve(this.paths);
            uni.hideLoading();
            uni.hideToast();
          },
          complete: () => {
            uni.hideLoading();
            uni.hideToast();
          },
        });
      });
    },
  },
};
</script>

<style>
@import "./editor-icon.css";

.page-body {
  height: calc(100% - var(--window-top) - var(--status-bar-height));
}

.wrapper {
  height: 100%;
}

.editor-wrapper {
  height: calc(100vh - var(--window-top) - var(--status-bar-height) - 140px);
  background: #eee;
}

.iconfont {
  display: inline-block;
  padding: 16rpx;
  width: 34rpx;
  height: 34rpx;
  cursor: pointer;
  font-size: 40rpx;
}

.toolbar {
  box-sizing: border-box;
  border-bottom: 0;
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

.ql-container {
  box-sizing: border-box;
  padding: 24rpx 30rpx;
  width: 100%;
  min-height: 30vh;
  height: 100%;
  margin-top: 20rpx;
  font-size: 32rpx;
  line-height: 1.5;
}

.ql-active {
  color: #06c;
}
</style>