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

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

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

安装及使用

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

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

npm install @tinymce/[email protected] -S
npm install [email protected] -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: "/https/blog.csdn.net/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 li