feat(tinymce): migrate tinymce to @tinymce/tinymce-vue to adapt to Vue3 (#450)

Author: vanoneang

package-lock.json

@@ -15,7 +15,7 @@
   "dependencies": {
     "@antv/g2plot": "^0.11.35",
     "@babel/polyfill": "^7.4.4",
-    "@tinymce/tinymce-vue": "^2.0.0",
+    "@tinymce/tinymce-vue": "^4.0.0",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "dayjs": "^1.10.4",
@@ -30,7 +30,6 @@
     "photoswipe": "^4.1.2",
     "screenfull": "^4.2.0",
     "swiper": "^6.4.5",
-    "tinymce": "^5.0.1",
     "vue": "^3.0.0",
     "vue-croppa": "^1.3.8",
     "vue-router": "^4.0.0-beta.4",

package.json

@@ -4,14 +4,9 @@
   </div>
 </template>
 <script>
-// eslint-disable-next-line
-import tinymce from 'tinymce/tinymce'
 import Editor from '@tinymce/tinymce-vue'
 import { post } from '@/lin/plugin/axios'
 
-import 'tinymce/themes/silver'
-import './import-all'
-
 export default {
   name: 'TinymceEditor',
   props: {
@@ -27,64 +22,50 @@ export default {
       type: Number,
       default: undefined,
     },
-    upload_url: {
-      type: String,
-      default: '',
-    },
     showMenubar: {
       type: Boolean,
       default: true,
     },
     toolbar: {
       type: String,
-      default: ` undo redo 
-      | formatselect 
-      | bold italic strikethrough forecolor backcolor formatpainter 
-      | link image | alignleft aligncenter alignright alignjustify 
-      | numlist bullist outdent indent 
-      | removeformat 
+      default: ` undo redo
+      | formatselect
+      | bold italic strikethrough forecolor backcolor formatpainter
+      | link image | alignleft aligncenter alignright alignjustify
+      | numlist bullist outdent indent
+      | removeformat
       | preview fullscreen code`,
     },
-    baseUrl: {
-      type: String,
-      default: '',
-    },
   },
   components: {
     Editor,
   },
   data() {
     return {
+      content: '',
       tinymceFlag: 1,
       tinymceInit: {},
-      content: '',
     }
   },
   created() {
     this.tinymceInit = {
-      language_url: `${this.baseUrl}/tinymce/langs/zh_CN.js`,
-      skin_url: `${this.baseUrl}/tinymce/skins/ui/oxide`,
-      content_css: `${this.baseUrl}/tinymce/skins/content/default/content.css`,
       language: 'zh_CN',
       height: this.height,
-      width: undefined,
-      browser_spellcheck: true, // 拼写检查
-      branding: false, // 去水印
-      elementpath: false, // 禁用编辑器底部的状态栏
+      branding: true, // 去水印
       statusbar: false, // 隐藏编辑器底部的状态栏
+      elementpath: false, // 禁用编辑器底部的状态栏
+      toolbar: this.toolbar,
       paste_data_images: true, // 允许粘贴图像
+      browser_spellcheck: true, // 拼写检查
       menubar: this.showMenubar, // 隐藏最上方menu
-      plugins: `print fullpage searchreplace autolink directionality visualblocks 
-        visualchars template codesample charmap hr pagebreak nonbreaking anchor toc insertdatetime 
+      plugins: `print fullpage searchreplace autolink directionality visualblocks
+        visualchars template codesample charmap hr pagebreak nonbreaking anchor toc insertdatetime
         wordcount textpattern help advlist table lists paste preview fullscreen image imagetools code link`,
-      toolbar: this.toolbar,
       async images_upload_handler(blobInfo, success, failure) {
         const file = new File([blobInfo.blob()], blobInfo.filename(), {
           type: 'image/*',
         })
-        post('cms/file', {
-          file,
-        })
+        post('cms/file', { file })
           .then(res => {
             if (res.length && res[0]?.url) {
               success(res[0].url)
@@ -117,3 +98,9 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.tox-notification {
+  display: none !important;
+}
+</style>

src/component/base/tinymce/import-all.js

@@ -1,7 +1,7 @@
 <template>
   <div class="lin-container">
     <div class="lin-title">富文本舞台页面</div>
-    <div class="lin-wrap"><tinymce @change="change" upload_url="http://dev.lin.colorful3.com/cms/file/" /></div>
+    <div class="lin-wrap"><tinymce @change="change" :defaultContent="text" /></div>
   </div>
 </template>