TinyMCE的使用

项目使用 vue-cli 3.x 版本，tinymce 5

一、npm install tinymce -S

二、npm install @tinymce/tinymce-vue

三、public 文件夹下新建文件夹 tinymce ，在 node_modules 中找到 tinymce/skins 目录，而后将 skins 目录拷贝到 tinymce 目录下 ，

四、还须要下载一个中文语言包 (https://www.tiny.cloud/get-tiny/language-packages/)，而后将这个语言包放到 tinymce  - lang 目录下

五、components 中注册 tinymce-vue 组件

　　

<template>
<div>
  <!-- 给editor加key是由于给tinymce keep-alive之后组件切换时tinymce编辑器会显示异常， 在activated钩子里改变key的值能够让编辑器从新建立 -->
  <editor id="tinymceEditor" :init="tinymceInit" v-model="content" :key="tinymceFlag"></editor>
  <Upload multiple ref="imageUpload" action="//jsonplaceholder.typicode.com/posts/" :on-success="insertImage" style="display:none">
  </Upload>
</div>
</template>
<script> import tinymce from 'tinymce/tinymce' import 'tinymce/themes/silver/theme' import Editor from '@tinymce/tinymce-vue' import 'tinymce/plugins/textcolor' import 'tinymce/plugins/advlist' import 'tinymce/plugins/table' import 'tinymce/plugins/lists' import 'tinymce/plugins/paste' import 'tinymce/plugins/preview' import 'tinymce/plugins/fullscreen' export default { name: 'TinymceEditor', components: { 'editor': Editor }, data () { return { tinymceFlag: 1, tinymceInit: {}, content: '本地图片上传功能仅为演示，实际使用须要补全图片存储地址' } }, methods: { // 插入图片至编辑器
 insertImage (res, file) { let src = '' // 图片存储地址
      tinymce.execCommand('mceInsertContent', false, `<img src=${src}>`) } }, created () { const that = this
    this.tinymceInit = { skin_url: '/tinymce/skins/ui/oxide', language_url: `/tinymce/langs/zh_CN.js`,
      language: 'zh_CN', height: document.body.offsetHeight - 300, browser_spellcheck: true, // 拼写检查
      branding: false, // 去水印
      // elementpath: false, //禁用编辑器底部的状态栏
      statusbar: false, // 隐藏编辑器底部的状态栏
      paste_data_images: true, // 容许粘贴图像
      menubar: false, // 隐藏最上方menu
      plugins: 'advlist table lists paste preview fullscreen', toolbar: 'fontselect fontsizeselect forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | imageUpload quicklink h2 h3 blockquote table numlist bullist preview fullscreen', /** * 下面方法是为tinymce添加自定义插入图片按钮 * 借助iview的Upload组件,将图片先上传到存储云上，再将图片的存储地址放入编辑器内容 */ setup: (editor) => { editor.ui.registry.addButton('imageUpload', { // text: '插入图片',
          tooltip: '插入图片', icon: 'image', onAction: () => { let upload = that.$refs.imageUpload upload.handleClick() } }) } } }, activated () { this.tinymceFlag++ }, mounted () { } } </script>

六、视图组件中 引入 <tinymce-editor /> 组件

<tinymce-editor />
 import TinymceEditor from '../../components/tinymce-editor/tinymce-editor' components: {TinymceEditor},