update editor

package.json

@@ -72,7 +72,8 @@
     "webpack-merge": "^4.2.2"
   },
   "dependencies": {
-    "@ckeditor/ckeditor5-build-classic": "^24.0.0",
+    "@ckeditor/ckeditor5-build-classic": "^27.0.0",
+    "@ckeditor/ckeditor5-build-decoupled-document": "^27.0.0",
     "@ckeditor/ckeditor5-vue2": "^1.0.5",
     "axios": "^0.21.0",
     "core-js": "^3.8.1",

src/components/ckeditor/index.vue

@@ -13,8 +13,13 @@
 
 <script>
 import CKEditor from '@ckeditor/ckeditor5-vue2'
-import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
-import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn'
+
+import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document'
+import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn'
+
+// import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
+// import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn'
+
 import MyUploadAdapter from './MyUploadAdapter'
 
 export default {
@@ -27,14 +32,20 @@ export default {
   },
   data() {
     return {
-      editor: ClassicEditor,
+      editor: DecoupledEditor,
       editorConfig: {
-        language: this.$i18n.locale.toLocaleLowerCase()
+        language: this.$i18n.locale.toLocaleLowerCase(),
+        fontFamily: { options: ['default', '宋体', 'Times New Roman'] },
+        fontSize: { options: ['12px', '14px', '16px', '18px', '20px', '24px', '36px'] }
       }
     }
   },
   methods: {
     onEditorReady(editor) {
+      editor.ui
+        .getEditableElement()
+        .parentElement.insertBefore(editor.ui.view.toolbar.element, editor.ui.getEditableElement())
+
       const FileRepository = editor.plugins.get('FileRepository')
       // 自定义上传图片插件
       FileRepository.createUploadAdapter = loader => {
@@ -53,6 +64,8 @@ export default {
   min-height: 300px;
   max-height: 500px;
   word-break: break-word;
+  background: var(--ck-color-base-background);
+  border: 1px solid var(--ck-color-toolbar-border) !important;
 }
 .ck-sticky-panel__content {
   position: unset !important;

src/components/tinymce/index.vue

+<template>
+  <editor v-bind="options" />
+</template>
+
+<script>
+import Editor from '@tinymce/tinymce-vue'
+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',
+          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'
+        }
+      }
+    }
+  }
+}
+</script>

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

@@ -181,10 +181,9 @@ export default {
     },
     // 显示作业评论
     showComment() {
-      return true
-      // const currentTime = new Date().getTime()
-      // const endTime = +new Date(this.deadline)
-      // return this.hasComment && currentTime > endTime
+      const currentTime = new Date().getTime()
+      const endTime = +new Date(this.deadline)
+      return this.hasComment && currentTime > endTime
     }
   },
   methods: {

src/router/routes.js

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