vue2.0中引入tinymce富文本编辑器

一、相关文档

官网及文档：www.tiny.cloud

官网下载：www.tiny.cloud/get-tiny/se…

汉化文档地址：tinymce.ax-z.cn/

二、使用相关

VUE项目版本是2.x，切记： vue2中不能使用@tinymce/tinymce-vue为4以上版本；
如果有安装高版本，卸载：npm uninstall @tinymce/tinymce-vue

1.安装

• npm install tinymce@5.0.12 -S
• npm install @tinymce/tinymce-vue@2.1.0 -S

2.配置文件

找到 node_modules 下的 tinymce 将其目录下的 skins, themes 复制到 static/tinymce文件路径下

3.封装组件

<template>
  <div class="tinymce-editor">
    <editor
      v-model="myValue"
      :init="init"
      :disabled="disabled"
      @onClick="onClick"
    >
    </editor>
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce';
import Editor from '@tinymce/tinymce-vue';
import 'tinymce/themes/silver/theme';
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';
export default {
  components: {
    Editor,
  },
  props: {
    //传入一个value，使组件支持v-model绑定
    value: {
      type: String,
      default: '',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    plugins: {
      type: [String, Array],
      default:
        // ' anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools insertdatetime link lists   noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'
        'lists image media',
    },
    toolbar: {
      type: [String, Array],
      default:
        // 'undo redo | searchreplace | bold  italic | underline | strikethrough | alignleft  aligncenter alignright | outdent indent  blockquote  removeformat subscript superscript code codesample hr bullist numlist link image charmap preview anchor pagebreak insertdatetime  table  forecolor backcolor'
        'undo redo |  formatselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat hr',
    },
  },
  data() {
    return {
      //初始化配置
      init: {
        language_url: '/tinymce/langs/zh_CN.js', // 根据自己文件的位置，填写正确的路径。路径不对会报错
        language: 'zh_CN',
        skin_url: '/tinymce/skins/ui/oxide', // 根据自己文件的位置，填写正确的路径。路径不对会报错
        height: 300,
        // plugins: this.plugins,
        plugins: this.plugins,
        // toolbar: this.toolbar,
        toolbar: false,
        branding: false,
        menubar: false,
        resize: false,
        statusbar: false,
      },
      myValue: this.value,
    };
  },
  mounted() {
    tinymce.init({});
  },
  methods: {
    //添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
    //需要什么事件可以自己增加
    onClick(e) {
      this.$emit('onClick', e, tinymce);
    },
    //可以添加一些自己的自定义事件，如清空内容
    clear() {
      this.myValue = '';
    },
  },
  watch: {
    value(newValue) {
      this.myValue = newValue;
    },
    myValue(newValue) {
      this.$emit('input', newValue);
    },
  },
};
</script>

<style scoped lang="scss"></style>

4.注意

注意： 这里的路径一定要写正确，不然会页面不出富文本效果且控制台会报错