编辑器切换到tinymce

package-lock.json

@@ -13,6 +13,7 @@
         "@ckeditor/ckeditor5-build-decoupled-document": "^24.0.0",
         "@ckeditor/ckeditor5-vue2": "^1.0.5",
         "@ezijing/web-message-sdk": "^0.2.1",
+        "@tinymce/tinymce-vue": "^3.2.8",
         "axios": "^0.21.1",
         "core-js": "^3.9.0",
         "cross-env": "^7.0.3",
@@ -1309,6 +1310,14 @@
         "vue": "^2.6.12"
       }
     },
+    "node_modules/@tinymce/tinymce-vue": {
+      "version": "3.2.8",
+      "resolved": "https://registry.npmjs.org/@tinymce/tinymce-vue/-/tinymce-vue-3.2.8.tgz",
+      "integrity": "sha512-jEz+NZ0g+FZFz273OEUWz9QkwPMyjc5AJYyxOgu51O1Y5UaJ/6IUddXTX6A20mwCleEv5ebwNYdalviafx4fnA==",
+      "peerDependencies": {
+        "vue": "^2.4.3"
+      }
+    },
     "node_modules/@types/anymatch": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz",
@@ -14702,6 +14711,12 @@
         "vue": "^2.6.12"
       }
     },
+    "@tinymce/tinymce-vue": {
+      "version": "3.2.8",
+      "resolved": "https://registry.npmjs.org/@tinymce/tinymce-vue/-/tinymce-vue-3.2.8.tgz",
+      "integrity": "sha512-jEz+NZ0g+FZFz273OEUWz9QkwPMyjc5AJYyxOgu51O1Y5UaJ/6IUddXTX6A20mwCleEv5ebwNYdalviafx4fnA==",
+      "requires": {}
+    },
     "@types/anymatch": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz",

package.json

@@ -77,6 +77,7 @@
     "@ckeditor/ckeditor5-build-decoupled-document": "^24.0.0",
     "@ckeditor/ckeditor5-vue2": "^1.0.5",
     "@ezijing/web-message-sdk": "^0.2.1",
+    "@tinymce/tinymce-vue": "^3.2.8",
     "axios": "^0.21.1",
     "core-js": "^3.9.0",
     "cross-env": "^7.0.3",

src/components/tinymce/imageUpload.js

+import { uploadFile } from '@/api/common'
+
+export default function(blobInfo, succFun, failFun) {
+  const file = blobInfo.blob()
+  uploadFile({ file })
+    .then(response => {
+      response.success ? succFun(response.url) : failFun(response.message)
+    })
+    .catch(response => {
+      failFun(response.message)
+    })
+}

src/components/tinymce/index.vue

 <template>
-  <editor v-bind="options" />
+  <editor :init="init" v-bind="$attrs" v-on="$listeners" @onChange="onChange" @onBlur="onBlur" />
 </template>
 
 <script>
 import Editor from '@tinymce/tinymce-vue'
+import ImageUpload from './imageUpload'
 export default {
   components: {
     editor: Editor
   },
   data() {
     return {
-      options: {
       init: {
         min_height: 300,
         max_height: 500,
         menubar: false,
         language: this.$i18n.locale.replace('-', '_'),
         branding: false,
-          plugins: 'wordcount table autoresize charmap code fullscreen hr lists codesample',
+        plugins: 'wordcount table autoresize charmap fullscreen hr lists link code preview quickbars',
         toolbar:
-            'undo redo | removeformat formats | fontselect fontsizeselect lineheight bold italic underline strikethrough forecolor backcolor | link image | align indent outdent numlist bullist | charmap table blockquote hr codesample fullscreen',
-          fontsize_formats: '12px 14px 15px 16px 17px 18px 20px 24px',
-          lineheight_formats: '0.5 1 1.2 1.5 2'
+          'undo redo | styleselect fontselect fontsizeselect lineheight bold italic underline strikethrough forecolor backcolor | link quickimage image media table | align hangingindent indent outdent numlist bullist | charmap  blockquote hr fullscreen | code preview',
+        font_formats:
+          '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Times New Roman',
+        fontsize_formats: '8pt 10pt 12pt 14pt 15pt 16pt 17pt 18pt 20pt 24pt',
+        lineheight_formats: '0.5 1 1.2 1.5 2',
+        images_upload_handler: ImageUpload,
+        automatic_uploads: true,
+        quickbars_insert_toolbar: false,
+        style_formats: [{ title: '悬挂缩减', block: 'p', styles: { textIndent: '-2em', paddingLeft: '2em' } }],
+        content_style: 'img {max-width:100%;}'
       }
     }
+  },
+  methods: {
+    onChange(event, editor) {
+      this.dispatch('ElFormItem', 'el.form.change', editor.getContent())
+    },
+    onBlur(event, editor) {
+      this.dispatch('ElFormItem', 'el.form.blur', editor.getContent())
+    },
+    dispatch(componentName, eventName, params) {
+      var parent = this.$parent || this.$root
+      var name = parent.$options.componentName
+
+      while (parent && (!name || name !== componentName)) {
+        parent = parent.$parent
+
+        if (parent) {
+          name = parent.$options.componentName
+        }
+      }
+      if (parent) {
+        parent.$emit.apply(parent, [eventName].concat(params))
+      }
     }
   }
 }
 </script>
+
+<style>
+.tox .tox-tbtn--bespoke .tox-tbtn__select-label {
+  width: 4em !important;
+}
+</style>

src/index.html

@@ -25,7 +25,7 @@
     <!-- 解决iframe嵌套，CC视频在safri中打开免登陆兼容问题 -->
     <script src="//view.csslcloud.net/js/_fix_.js"></script>
     <!-- <script src="//view.csslcloud.net/js/sdk/3.1.0/liveSDK.js" type="text/javascript"></script> -->
-
+    <script src="https://webapp-pub.ezijing.com/plugins/tinymce/tinymce.min.js"></script>
     <!-- 日志采集 -->
     <!-- <script src="https://zws-imgs-pub.ezijing.com/static/plugin/mqtt_msg.godzyx-1.0.3.js"></script>
     <script src="https://zws-imgs-pub.ezijing.com/static/plugin/error.godzyx-1.0.3.js"></script> -->

src/modules/viewer/components/work/chapterWorkCommentItem.vue

@@ -8,7 +8,7 @@
 <script>
 // componets
 import ChapterWorkAnswerItem from './chapterWorkAnswerItem.vue'
-import VEditor from '@/components/ckeditor'
+import VEditor from '@/components/tinymce'
 
 export default {
   props: { endDate: { type: String }, data: { type: Object, default: () => ({}) }, disabled: { type: Boolean } },

src/modules/viewer/components/work/courseWork.vue

@@ -83,7 +83,7 @@
 <script>
 // componets
 import Container from '../common/container.vue'
-import VEditor from '@/components/ckeditor'
+import VEditor from '@/components/tinymce'
 import VUpload from '../common/upload.vue'
 // api
 import * as api from '../../api'

src/modules/viewer/components/work/examItem.vue

@@ -71,7 +71,7 @@
 
 <script>
 // components
-import VEditor from '@/components/ckeditor'
+import VEditor from '@/components/tinymce'
 import VUpload from '../common/upload.vue'
 
 export default {

src/pages/feedback/feedbackCreate.vue

@@ -52,7 +52,7 @@
 <script>
 import cAction from '@action'
 
-import VEditor from '@/components/ckeditor'
+import VEditor from '@/components/tinymce'
 
 export default {
   components: { VEditor },

src/pages/learn/course/components/CourseDiscuss.vue

@@ -52,7 +52,7 @@
 
 <script>
 import * as api from '@/api/discuss'
-import VEditor from '@/components/ckeditor'
+import VEditor from '@/components/tinymce'
 
 export default {
   components: { VEditor },

src/router/routes.js

@@ -212,5 +212,5 @@ export default [
   },
   { path: '/403', name: '403', component: () => import('@/pages/exception/403.vue') },
   { path: '/browser', name: 'browser', component: () => import('@/pages/exception/browser.vue') },
-  { path: '/editor', name: 'editor', component: () => import('@/components/ckeditor/index.vue') }
+  { path: '/editor', name: 'editor', component: () => import('@/components/tinymce/index.vue') }
 ]