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},