Tinymce + vue 配置与数据回显

每天使用csdn解决问题，也想为社区做个贡献

使用版本：

  "dependencies": {
    "@interactjs/actions": "1.10.2",
    "@interactjs/auto-scroll": "1.10.2",
    "@interactjs/auto-start": "1.10.2",
    "@interactjs/dev-tools": "1.10.2",
    "@interactjs/interactjs": "1.10.2",
    "@interactjs/modifiers": "1.10.2",
    "@tinymce/tinymce-vue": "^3.2.8",
    "@wiris/mathtype-tinymce5": "^8.2.6",
    "element-resize-detector": "^1.2.1",
    "element-ui": "^2.15.13",
    "html2canvas": "^1.4.1",
    "jquery": "^3.6.4",
    "jspdf": "^2.5.1",
    "print-js": "^1.6.0",
    "tinymce": "^5.10.4",
    "vuex": "^3.6.2"
  },

回显代码：

import Editor from "./ImcoderTinymce";
  components: {
    Editor
  },
Editor.get('tinymceTxt').setContent(temForm[field_name])

自定义的ImcoderTinymce：

<template>
    <!-- 富文本 -->
    <div>
      <editor v-model="content" :init="init" :disabled="disabled"></editor>
    </div>
  </template>
   
  <script>
  import tinymce from "tinymce/tinymce";
  import Editor from "@tinymce/tinymce-vue";
  import "tinymce/icons/default/icons";
  import "tinymce/themes/silver";
  import "tinymce/plugins/kityformula-editor"; 
  import "tinymce/plugins/@wiris/mathtype-tinymce5"; 
  import "tinymce/plugins/image";
  import "tinymce/plugins/media";
  import "tinymce/plugins/table";
  import "tinymce/plugins/lists";
  import "tinymce/plugins/contextmenu";
  import "tinymce/plugins/wordcount";
  import "tinymce/plugins/colorpicker";
  import "tinymce/plugins/textcolor";
  import "tinymce/plugins/preview";
  import "tinymce/plugins/code";
  import "tinymce/plugins/link";
  import "tinymce/plugins/advlist";
  import "tinymce/plugins/codesample";
  import "tinymce/plugins/hr";
  import "tinymce/plugins/fullscreen";
  import "tinymce/plugins/textpattern";
  import "tinymce/plugins/searchreplace";
  import "tinymce/plugins/autolink";
  import "tinymce/plugins/directionality";
  import "tinymce/plugins/visualblocks";
  import "tinymce/plugins/visualchars";
  import "tinymce/plugins/template";
  import "tinymce/plugins/charmap";
  import "tinymce/plugins/nonbreaking";
  import "tinymce/plugins/insertdatetime";
  // import "tinymce/plugins/imagetools";
  import "tinymce/plugins/autosave";
  import "tinymce/plugins/autoresize"; 
  // import 'tinymce/models/dom' // 这里是个坑 一定要引入
  import 'tinymce/skins/ui/oxide/skin.css'
  import 'tinymce/skins/ui/oxide/content.inline.css'

  
   
  export default {
    components: {
      Editor
    },
    props: {
      value: {
        type: String,
        default: ""
      },
      disabled: {
        type: Boolean,
        default: false
      },
      plugins: {
        type: [String, Array],
        default:
          "preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr nonbreaking insertdatetime advlist lists wordcount  textpattern autosave autoresize kityformula-editor"
      },
      toolbar: {
        type: [String, Array],
        default:
          "forecolor backcolor bold italic underline strikethrough link codesample | alignleft aligncenter alignright alignjustify outdent indent formatpainter | \
      styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
      table image media charmap hr pagebreak insertdatetime | fullscreen preview | kityformula-editor | tiny_mce_wiris_formulaEditor tiny_mce_wiris_formulaEditorChemistry"
      }
    },
    data() {
      return {
        //初始化配置
        init: {
          menubar: false, // 菜单栏显隐
          // language_url: "../staic/tinymce/langs/zh_CN.js",
          // language_url: 'tinymce/langs/zh_CN.js', // vue-cli2.x
          language: 'zh_CN',
        //   skin_url: "/static/tinymce/skins/ui/oxide",
          skin_url: '/tinymce/skins/ui/oxide', // vue-cli2.x
          content_css: '/tinymce/skins/content/default/content.css',// vue-cli2.x
          height: 770,
          min_height: 570,
          max_height: 570,
          toolbar_mode: "sliding",
          // images_upload_url:'', //指定接收上传图片的后端地址。调用editor.uploadImages()或utomatically时如果启用automatic_uploads则会触发该配置。
          automatic_uploads:false, //它将告诉TinyMCE使用图片文件实际的文件名，而不是每次随即生成一个新的。
          images_upload_base_path:'../static/image', //指定一个基本路径，多用于不同目录结构中，修正上传图片功能返回的图片相对地址。
          images_upload_credentials:true, //对images_upload_url中指定的地址调用时是否传递cookie等跨域的凭据。
          custom_undo_redo_levels: 30, //该选项影响撤销、重做工具允许的最大次数，默认为无限次。但对于内存有限的小型系统，定义一个较小的值（例如10）能减少内存开销。
          //body_class:'my_class',
          //body_id: 'elm1=my_id, elm2=my_id2',//为编辑区iframe内生成的body设置一个class或id。该class或id可用于设置css样式配合下面的content_css使用。
          enubar:true,
          statusbar: true,
          plugins: this.plugins,
          toolbar: this.toolbar,
          external_plugins: {
            'kityformula-editor': '/tinymce/plugins/kityformula-editor/plugin.min.js',
            // 'tiny_mce_wiris': '/tinymce/plugins/@wiris/mathtype-tinymce5/plugin.min.js'
          },
          content_style: "p {margin: 5px 0;}",
          fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",
          draggable_modal: false,
          font_formats:
            "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",
          branding: false,
          // 图片上传
          images_upload_handler: (blobInfo, success, failure) => { //此选项允许你使用自定义函数代替TinyMCE来处理上传操作。该自定义函数可接受四个参数：如果未使用此配置，TinyMCE将使用ajax每次上传一个图片，并在成功返回结果后调用成功回调函数。
            const img = 'data:image/jpeg;base64,' + blobInfo.base64()
            success(img)
            console.log(success)
            console.log(failure)
            const formData = new FormData()
            formData.append('file', blobInfo.blob())
            //图片上传
            // freserveTableFoodDescribe(formData).then(res => {
            //   if (res.code === '10000') {
            //     const file = res.data
            //     success(file.url)
            //     return
            //   }
            //   failure('上传失败')
            // }).catch(() => {
            //   failure('上传出错')
            // })
          },
          
        },
        content: this.value
      };
    },
    mounted() {
      tinymce.init({});
    },
    methods: {
      
    },
    watch: {
      value(newValue) {
        this.content = newValue;
      },
      content(newValue) {
        this.$emit("input", newValue);
      }
    }
  };
  </script>
  <style >
   /* 在el-dialog中tinymce z-index 被太小而被遮挡时要加这两句 */
	.tox-tinymce-aux{z-index:99999 !important;}
	.tinymce.ui.FloatPanel{z-Index: 99;}
  </style>

一定要在public文件夹将node_model下的tinymce复制过来：