vue中使用TinyMce富文本之第二弹

版本

"@tinymce/tinymce-vue": "^3.0.1",
"tinymce": "^5.0.14",

1、完整代码

<!-- tinyMce富文本编辑器 -->
<template>
  <div class="editor-wrapper">
    <Editors
      id="tinymce"
      v-model="currentValue"
      :init="tinymceInit"
      @onChange="handleChange()"
      @onBlur="handleChange()"
    />
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import tinymce from 'tinymce/tinymce'
import "tinymce/icons/default/icons.min.js";
import "tinymce/themes/silver/theme";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver/theme";
import "tinymce/plugins/textcolor";
import "tinymce/plugins/advlist";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/preview";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/anchor";
import "tinymce/plugins/charmap";
import "tinymce/plugins/emoticons";
import "tinymce/plugins/hr";
import "tinymce/plugins/insertdatetime";
// import "tinymce/plugins/media";
import "tinymce/plugins/pagebreak";
import "tinymce/plugins/print";
import "tinymce/plugins/searchreplace";
import "tinymce/plugins/wordcount";
import axios from "axios";
export default {
  name: "Editor",
  components: {
    Editors: Editor,
  },
  props: {
    editorContent: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      tinymceInit: {},
      uploadUrl: `${process.env.VUE_APP_BASE_API}/file/v1/uploadLocation`, // 上传图片地址
      headers: {
        Authorization: "Bearer " + getToken(), // Authorization ，而不是token
      },
      currentValue: "",
    };
  },
  watch: {
    editorContent(val) {
      this.setCurrentValue(val);
    },
  },
  created() {
    const that = this;
    this.tinymceInit = {
      language_url: "/tinymce/zh_CN.js",
      language: "zh_CN",
      skin_url: "/tinymce/skins/ui/oxide",
      height: 150,
      plugins:
        "lists advlist anchor charmap emoticons fullscreen hr image insertdatetime link pagebreak powerpaste preview print searchreplace wordcount",
      toolbar:
        "bullist numlist anchor charmap emoticons fullscreen hr image insertdatetime link pagebreak powerpaste preview print searchreplace wordcount",
      emoticons_database_url: "/tinymce/emoticons/js/emojis.js", // 解决表情插件无法成功加载
      browser_spellcheck: true, // 拼写检查
      branding: false, // 去水印
      menubar: false, // 隐藏最上方menu
      statusbar: false, // 隐藏编辑器底部的状态栏
      paste_data_images: true, // 允许粘贴图像
      powerpaste_word_import: 'propmt',
      powerpaste_allow_local_images: true,
      powerpaste_html_import: 'propmt',
      // 上传图片(这里不会执行，因为使用powerpaste代替了paste,需求需要复制word上的文字图片，看具体需求)
      images_upload_handler: (blobInfo, success, failure) => {
        if (blobInfo.blob().name) {
          const formdata = new FormData();
          formdata.set("isOpen", 1);  //  额外参数
          formdata.set("file", blobInfo.blob());
          axios({
            method: "post",
            url: this.uploadUrl,
            data: formdata,
            headers: {
              Authorization: "Bearer " + getToken(),
              // filterMode: localStorage.getItem("dataType"),
            },
          })
            .then((res) => {
              success(res.data.data.path);
            })
            .catch((res) => {
              failure("error");
            });
        }
      },
    };
  },
  methods: {
    // 获取富文本的内容，传给父页面
    handleChange(e) {
      this.$emit("gethtml", this.currentValue);
      const imageList = this.getEditorImage(this.currentValue);
      const data = [];
      imageList.forEach((item, index) => {
        data[index] = { imgUrl: item };
      });
      this.$emit("pics", data);
    },
    // 富文本内容的计算属性
    setCurrentValue(value) {
      if (value) {
        if (value === this.currentValue) return;
        this.currentValue = value;
      }
    },
    // 获取富文本中的图片
    getEditorImage(str) {
      const imgReg = /<img.*?(?:>|\/>)/gi;
      const arr = str.match(imgReg);
      const arrNew = [];
      if (arr && arr.length !== 0) {
        arr.forEach((item) => {
          arrNew.push(item.substr(10, item.length - 12));
        });
      }
      return arrNew;
    },
  },
  mounted() {
    this.setCurrentValue(this.editorContent);
  },
};
</script>
<style>
.hidden-region {
  display: none;
}
/* 在页面正常使用时不用加这个样式，在弹窗使用时，要加这个样式，来提高z-index层级，否则工具栏的一些工具不能使用。 */
.tox-tinymce-aux {
  z-index: 5000 !important;
}
</style>

2、使用

 <TinymceEditor
      ref="quillEditor"
      :editor-content="userForm.content"
      @pics="getPicList"
      @gethtml="getEditorHtml"
 />
 
 getPicList(val) {
    // console.log(val);
 },
 getEditorHtml(html) {
    // console.log(html);
    this.userForm.content = html;
  },

效果：

powerpaste下载地址： https://download.csdn.net/download/weixin_47074432/21798786?spm=1001.2014.3001.5503