Using tinymce-vue rich text in Vue2

Using tinymce-vue rich text in Vue2

1. npm download tinymce, if it is vue3.0 version, execute the following code

   npm install tinymce --save
   npm install @tinymce/tinymce-vue --save
   

2. Vue2.0 is not supported after tinymce4.0, so a fixed version or a downgraded version is required, otherwise an error will be reported.

   Error message:

   TypeError: Object(...) is not a function at 
   Module../node_modules/_@tinymce_tinymce-vue@4.0.0@@tinymce/tinymce-vue/lib/es2015/main/ts/components/Editor.js (Editor.js:37)
   

3. Use the following npm installation in vue2.0

   npm install tinymce@5.1.0 --save
   npm install @tinymce/tinymce-vue@3.0.1
   

   node_modulesAfter the installation is complete, find the skins and folders tinymcebelow, copy and paste them to the next file for later use . In addition , rich text is enabled by default , so you need to go to the corresponding language pack, which contains the languages ​​​​of most countries. After the download is completed, it will be a file. Download The language pack is also placed in the directory; download the language pack address: https://www.tiny.cloud/get-tiny/language-packages/themespublic

tinymce英文官网下载jslangspublic
   
   

4. Encapsulate a tinymce rich text component

   <template>
     <div class="tinymce-editor">
       <Editor v-model="myValue" :init="init" :disabled="disabled" ref="editorRef"
         :key="timestamp" @onClick="onClick">
       </Editor>
     </div>
   </template>
   <script>
   import tinymce from 'tinymce/tinymce'
   import Editor from '@tinymce/tinymce-vue'
   import {
         
          uploadFiles } from '@/api/common.js'
   import 'tinymce/themes/silver/theme'
   // 列表插件
   import 'tinymce/plugins/lists'
   import 'tinymce/plugins/advlist'
   // 上传图片插件
   import 'tinymce/plugins/image'
   import 'tinymce/plugins/imagetools'
   // 表格插件
   import 'tinymce/plugins/table'
   // 自动识别链接插件
   import 'tinymce/plugins/autolink'
   // 预览插件
   import 'tinymce/plugins/preview'
   export default {
         
         
     name: 'TinymceEditor',
     components: {
         
         
       Editor
     },
     props: {
         
         
       // 传入一个value，使组件支持v-model绑定
       value: {
         
         
         type: String,
         default: ''
       },
       disabled: {
         
         
         type: Boolean,
         default: false
       },
       menubar: {
         
          // 菜单栏      
         type: String,
         default: 'file edit insert view format table'
       },
       // 相关插件配置
       plugins: {
         
         
         type: [String, Array],
         default:
           'lists advlist image imagetools table autolink preview'
       },
       // 工具栏配置
       toolbar: {
         
         
         type: [String, Array],
         default:
           'undo redo |  formatselect | fontsizeselect | bold italic underline forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image table preview'
       },
       // 富文本高度
       height: {
         
         
         type: Number,
         default: 500
       }
     },
     data () {
         
         
       return {
         
         
         // 当前时间戳,是为了解决回显问题
         timestamp: 0,
         //初始化配置
         init: {
         
         
           language_url: '/tinymce/langs/zh_CN.js', // 根据自己文件的位置，填写正确的路径，注意/可以直接访问到public文件
           language: 'zh_CN',
           skin_url: '/tinymce/skins/ui/oxide', // 根据自己文件的位置，填写正确的路径。路径不对会报错
           height: this.height,
           plugins: this.plugins,
           toolbar: this.toolbar,
           branding: false,
           menubar: false,
           // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
           // 配置了此方法,即可手动选择图片
           images_upload_handler: (blobInfo, success, failure) => {
         
         
             const formData = new FormData()
             formData.append('files', blobInfo.blob());
             uploadFiles(formData)
               .then(res => {
         
         
                 success(res.url)
               })
               .catch(err => {
         
         
                 failure(err)
               })
           },
           resize: false,
         },
         myValue: this.value
       }
     },
     methods: {
         
         
       // 需要什么事件可以自己增加 可用的事件参照文档=> https://github.com/tinymce/tinymce-vue
       onClick (e) {
         
         
         this.$emit('onClick', e, tinymce)
       },
       // 可以添加一些自己的自定义事件，如清空内容
       clear () {
         
         
         this.myValue = ''
       },
   
       // 解决切换页签后数据回显问题
       setTinymceContent () {
         
         
         setTimeout(() => {
         
         
           this.timestamp = new Date().getTime()
         }, 10)
       }
     },
     watch: {
         
         
       value: {
         
         
         handler (newValue) {
         
         
           this.myValue = newValue
         },
         immediate: true
       },
       myValue (newValue) {
         
         
         this.$emit('input', newValue)
       }
     }
   }
   </script>
   

5. Component usage

   <TinymceEditor v-model="form.noticeContent" ref="tinymceEditorRef"></TinymceEditor>
   

6. Show results
   

Forward link: https://juejin.cn/post/7218069978045055032