vue整合tinymce做富文本编辑器

1、安装tinymce-vue和tinymce

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

2、在public下创建以下目录结构

• 将node_modules inymce下的plugins和skins复制到tinymce下

• 去官网下载汉化包

将解压后的汉化包复制到tinymce下

• 最后public下的目录结构

3、在components目录下创建以下目录结构

其中toolbar.js放置常用工具，内容如下

const toolbar = [
    'searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent blockquote undo redo removeformat subscript superscript code codesample '
    , 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen fontselect fontsizeselect styleselect']

export default toolbar

index.vue，对富文本编辑器进行简单配置。详细配置参照官方文档

<template>
  <Editor v-model="data" :init="init" :disabled="disabled"/>
</template>
<script>
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver/theme";
import "tinymce/icons/default/icons";
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 plugins from "./plugins";
import toolbar from "./toolbar";
export default {
  name: "TinymceEditor",
  components: {
    Editor
  },
  props: {
    value: { type: String, required: true }, // 编辑内容
    option: { type: Object, default: undefined }, // 配置参数
    disabled: { type: Boolean, default: false },
    menubar: {
      type: String,
      default: "file edit insert view format table"
    }
  },
  data() {
    return {
      data: this.value,
      init: {
        menubar: false, // 禁用菜单栏
        branding: false, // 隐藏右下角技术支持
        elementpath: false, // 隐藏底栏的元素路径
        font_formats:
          "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif",
        fontsize_formats:
          "12px 14px 16px 18px 20px 22px 24px 26px 28px 30px 32px 34px 36px 38px 40px 50px 60px 70px 80px 90px 100px 120px 140px 160px 180px 200px",
        language_url: "/static/tinymce/langs/zh_CN.js",
        language: "zh_CN",
        skin_url: "/static/tinymce/skins/ui/oxide",
        content_css: "/static/tinymce/skins/content/content.css",
        plugins:  ['advlist autolink autosave code codesample colorpicker colorpicker contextmenu directionality fullscreen hr image imagetools  insertdatetime link lists media nonbreaking preview searchreplace table template textcolor textpattern visualblocks visualchars wordcount'],
        toolbar: toolbar,
        menubar: this.menubar,
        contextmenu: false, // 禁用富文本的右键菜单，使用浏览器自带的右键菜单
        height: 500,
        ...this.option
      }
    };
  },
  mounted() {
    tinymce.init({});
  },
  methods: {}
};
</script>

4、使用

<template>
  <div>
    <tinymce v-model="description"></tinymce>
  </div>
</template>
<script>
import Tinymce from '@/components/Tinymce'
export default {
  components:{Tinymce},
  data() {
    return {
      description: ""
    };
  },
  created(){
  },
  methods:{
  }
}; 
</script>

具体效果