若依前后端分离版本使用tinymce富文本编辑器_若依富文本编辑器组件

tinymce中文文档地址：TinyMCE中文文档中文手册 (ax-z.cn)

tinymce官网地址：API Reference | Docs | TinyMCE

安装及使用

我项目里是vue2，tinymce使用的是5.10.3版本。

1.安装tinymce。我这里指定版本安装。

npm install @tinymce/tinymce-vue@3.0.1 -S
npm install tinymce@5.10.3 -S   

2.新建一个TinyEditor.vue组件，配置功能及语言包。

将node-modules中的tinymce代码复制到public目录下plugin下的文件可以都删了。

下载中文包语言包 |值得信赖的富文本编辑器 |微小的MCE (tiny.cloud)

将下载好的中文包解压后放到public下，在init引用语言包时，注意地址。

<template>
  <div className="tinymce-box">
    <Editor v-model="contentValue" :init="init" :disabled="disabled" @onClick="onClick"/>
  </div>
</template>
 
<script>
 
//引入tinymce编辑器
import Editor from '@tinymce/tinymce-vue'
 
//下面这三行解决tinymce编辑器变成只读模式
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver/theme'
import 'tinymce/icons/default/icons'
 
export default {
  name: 'TEditor',
  components: {
    Editor
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      init: {
        // 配置信息
        selector: "#textarea",
        height: 400,
        language_url: "/tinymce/langs/zh-Hans.js", // 中文包的存放路径
        language: "zh-Hans",
        toolbar_mode: "none",
        plugins: "print preview searchreplace autolink directionality visualblocks visualchars fullscreen image imagetools  link  template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount textpattern autosave kityformula-editor",
        toolbar: "fullscreen undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \\\n" +
          "                styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \\\n" +
          "                table image resize charmap hr pagebreak insertdatetime print preview | code selectall searchreplace visualblocks | indent2em lineheight formatpainter axupimgs | kityformula-editor",
        skin_url: '/tinymce/skins/ui/oxide',  //皮肤：浅色
        autosave_ask_before_unload: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;',  //字体样式
        // image_advtab: true,
        // a11y_advanced_options: true,
 
        //引入公式
        external_plugins: {
          'kityformula-editor': '/tinymce/plugins/kityformula-editor/plugin.min.js',
        },
 
        //图片上传按钮显示
        file_picker_types: 'image',
        image_caption: true,
        // 图片上传（下面两个都是图片上传方法，根据需要使用过一个即可）
        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())
        },
        file_picker_callback: function (cb, value, meta) {
          var input = document.createElement('input');
          input.setAttribute('type', 'file');
          input.setAttribute('accept', 'image/*');
 
          /*
            Note: In modern browsers input[type="file"] is functional without
            even adding it to the DOM, but that might not be the case in some older
            or quirky browsers like IE, so you might want to add it to the DOM
            just in case, and visually hide it. And do not forget do remove it
            once you do not need it anymore.
          */
 
          input.onchange = function () {
            var file = this.files[0];
 
            var reader = new FileReader();
            reader.onload = function () {
              /*
                Note: Now we need to register the blob in TinyMCEs image blob
                registry. In the next release this part hopefully won't be
                necessary, as we are looking to handle it internally.
              */
              var id = 'blobid' + (new Date()).getTime();
              var blobCache = tinymce.activeEditor.editorUpload.blobCache;
              var base64 = reader.result.split(',')[1];
              var blobInfo = blobCache.create(id, file, base64);
              blobCache.add(blobInfo);
 
              /* call the callback and populate the Title field with the file name */
              cb(blobInfo.blobUri(), {title: file.name});
            };
            reader.readAsDataURL(file);
          };
 
          input.click();
        },
        statusbar: false,//直接设置为false  去掉编辑器下方的广告
      },
      contentValue: this.value
 
    }
  },
  watch: {
    value(newValue) {
      this.contentValue = newValue
    },
    contentValue(newValue) {
      this.$emit('input', newValue)
    },
  },
  methods: {
    // 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
    onClick(e){
      this.$emit('onClick', e, tinymce)
    },
    //清空内容
    clear() {
      this.contentValue = ''
    },
  },
}
</script>
 
<style lang="scss">
figure.image {
  display: inline-block;
  border: 1px solid gray;
  margin: 0 2px 0 1px;
  background: #f5f2f0;
}
 
figure.align-left {
  float: left;
}
 
figure.align-right {
  float: right;
}
 
figure.image img {
  margin: 8px 8px 0 8px;
}
 
figure.image figcaption {
  margin: 6px 8px 6px 8px;
  text-align: center;
}
</style>
 

3.在main.js里全局引入封装的组件。

// tinymce富文本编辑器
import TinyEditor from '@/views/components/TinymceEditor.vue'
 
Vue.component('TinyEditor',TinyEditor)

4.在需要的界面中，直接使用<TinyEditor>标签使用即可。

例如：

<TinyEditor ref="tinymce"  v-model="item.answer" ></TinyEditor>

问题及解决：

问题1：如果富文本编辑器放在了el-dialog弹窗中，会导致在弹窗中点击编辑器功能按钮，点击无反应。
原因：tinymce的功能按钮弹窗的z-index低于el-dialog。

解决：将tinymce中的skin.min.css中的z-index后的数值添加4个0，如果值是-1，不需要改。

改完如果还不好使，将这个文件复制到node-modules中的tinymce的skin.min.css文件替换。

问题2：添加公式按钮

解决：kityformula-editor 数学公式 | TinyMCE中文文档中文手册 (ax-z.cn)到这个网址下载公式插件包，然后放到public下的tinymce下的plugins里。然后在自己第二步封装的组件TinyEditor.vue中的init中添加如下代码：plugins和toolbar里添加该功能按钮，external_plugins来引用这个插件。

plugins: "kityformula-editor",
toolbar: "kityformula-editor",
external_plugins: {
          'kityformula-editor': '/tinymce/plugins/kityformula-editor/plugin.min.js',
},

然后修改公式插件中的plugin.js和plugin.min.js中的baseURL地址（我这里使用的本地环境，所以直接写死了本地的localhost）。

实现效果：

问题3：去掉富文本编辑器下的广告。

解决：在tinymce的init中添加如下代码即可。

statusbar: false,//直接设置为false  去掉编辑器下方的广告

效果：

问题4：富文本编辑器界面可能会出现如下弹窗，提示申请key。

你如果不使用付费的插件，可以忽略这个问题，通过css样式隐藏掉即可。

解决：在public下的index.html中加入css样式隐藏掉。

问题5：图片无法拖拽四角拉伸改变大小。

（这个问题百度不到答案，我在使用的时候也找了半天，才发现是其他引用的问题）

解决：图片拉伸是tinymce自带的功能，如果无法拉伸图片，请确认封装的TinyEditor.vue中是否只有这个引入

删除其他没用的引用，例如：

问题6：界面控制台出现expected expression,got '<'  错误

解决：检查报错后面的js路径是否使用正确。贴图这个问题指的是语言包路径错误。

最后，如有其他问题请参考这位大佬的文章：富文本编辑器小技巧大杂烩之TinyMce_tinymce去除边框-CSDN博客