vue中TinyMCE编辑器的使用

vue中TinyMCE编辑器的使用

• TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器。富文本编辑器
• UEditor：百度前端的开源项目，功能强大，基于 jQuery，但已经没有再维护，而且限定了后端代码，修改起来比较费劲
• bootstrap-wysiwyg：微型，易用，小而美，只是 Bootstrap + jQuery…
• 所以项目中用到的是TinyMCE，可前后端分离。
• 可购买 tinymce 的服务，可以参考 tinymce-vue 的说明，通过 api-key 直接使用 tinymce。也可以下载 tinymce来使用。
• 安装与使用：
  1. 安装：npm install tinymce -S
  2. 安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 static 目录下。tinymce 默认是英文界面，所以还需要下载一个中文语言包zh_CN.js
  3. 下载中文语言包，附上地址下载链接
     
  4. 扩展插件：
     添加plugins.js插件和toolbar.js工具栏插件

plugins.js
// Any plugins you want to use has to be imported
// Detail plugins list see https://www.tinymce.com/docs/plugins/
// Custom builds see https://www.tinymce.com/download/custom-builds/

const plugins = ['advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime legacyoutput link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount']

export default plugins

toolbar.js
// Here is a list of the toolbar
// Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols

const toolbar = ['bold italic underline strikethrough alignleft aligncenter alignright outdent indent undo redo removeformat code preview fullscreen', 'link charmap insertdatetime media table forecolor backcolor']

export default toolbar

项目中使用：

组件：
<template>
  <div class="tinymce-container editor-container">
    <textarea class="tinymce-textarea" :id="tinymceId"></textarea>
  </div>
</template>

<script>
  import plugins from './plugins'
  import toolbar from './toolbar'
  export default {
    name: 'tinymce',
    components: {},
    props: {
      id: {
        type: String
      },
      value: {
        type: String,
        default: ''
      },
      toolbar: {
        type: Array,
        required: false,
        default() {
          return []
        }
      },
      menubar: {
        default: 'view format'
      },
      height: {
        type: Number,
        required: false,
        default: 360
      }
    },
    data() {
      return {
        hasChange: false,
        hasInit: false,
        tinymceId: this.id || 'vue-tinymce-' + +new Date()
      }
    },
    watch: {
      value(val) {
        if (!this.hasChange && this.hasInit) {
          this.$nextTick(() => window.tinymce.get(this.tinymceId).setContent(val))
        }
      }
    },
    mounted() {
      this.initTinymce()
    },
    activated() {
      this.initTinymce()
    },
    deactivated() {
      this.destroyTinymce()
    },
    methods: {
      initTinymce() {
        const _this = this
        window.tinymce.init({
          selector: `#${this.tinymceId}`,//操作的对象
          // selector: `textarea`,//操作的对象
          schema: 'html5',//模式
          height: this.height,
          body_class: 'panel-body ',
          object_resizing: true,//是否允许编辑图片
          toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,//工具栏
          menubar: this.menubar,//菜单栏
          plugins: plugins,//插件
          end_container_on_empty_block: true,//是否允许回车
          powerpaste_word_import: 'clean',
          code_dialog_height: 450,
          code_dialog_width: 1000,
          paste_auto_cleanup_on_paste: false,//是否自动清理复制粘贴过来的文本样式
          advlist_bullet_styles: 'square',//默认的无序列表标记
          advlist_number_styles: 'default',//默认的有序列表标记
          // imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],//图片跨域请求用的
          default_link_target: '_blank',//链接的默认打开形式
          link_title: false,
          language: "zh_CN",//语言
          init_instance_callback: editor => {
            if (_this.value) {
              editor.setContent(_this.value)
            }
            _this.hasInit = true
            editor.on('NodeChange Change KeyUp SetContent', () => {
              // console.log(window.tinymce.get(this.tinymceId))
              this.hasChange = true
              // console.log(editor.getContent({format: 'html'}));
              this.$emit('input', editor.getContent({format: 'html'}))
            })
          },
          insertimage_callback: cb => {
            console.log(cb)
          }
        })
      },
      destroyTinymce() {
        if (window.tinymce.get(this.tinymceId)) {
          window.tinymce.get(this.tinymceId).destroy()
        }
      },
      setContent(value) {
        window.tinymce.get(this.tinymceId).setContent(value)
      },
      getContent() {
        window.tinymce.get(this.tinymceId).getContent()
      },
      imageSuccessCBK(arr) {
        const _this = this;
        arr = arr.split(",");
        arr.forEach(v => {
          window.tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" src="${v}" >`);
        })
      }
    },
    destroyed() {
      this.destroyTinymce()
    }
  }
</script>

在页面中使用：
    <el-card>
      <p class="content_title">参数</p>
      <tinymce :height="300" v-model="content1"></tinymce>
    </el-card>
import Tinymce from '@/components/Tinymce'
  components: { Tinymce},