赛季内容编辑器调整

package.json

@@ -19,6 +19,8 @@
   },
   "dependencies": {
     "@stomp/stompjs": "^5.4.4",
+    "@wangeditor/editor": "^5.1.23",
+    "@wangeditor/editor-for-vue": "^1.0.2",
     "axios": "^0.18.0",
     "dayjs": "^1.11.5",
     "echarts": "^4.7.0",

src/views/contestDataManage/contestSeasonManage/editContent.vue

@@ -1,15 +1,20 @@
 <template>
-  <el-dialog v-dialogDrag v-loading="loading" title="编辑赛季内容" :visible.sync="dialogVisible" width="80%" :before-close="handleClose" center :close-on-click-modal="false">
-    <quill-editor
-      :ref="'contentInput'"
-      v-model="seasonContent"
-      style="width: 80%;margin-left: 10%;margin-top: 10px;"
-      :margin-bottom="20"
-      editor-type="default"
-      :no-handle-p="true"
-      :height="450"
-      placeholder="请输入"
+  <el-dialog v-dialogDrag v-loading="loading" destroy-on-close title="编辑赛季内容" :visible.sync="dialogVisible" width="80%" :before-close="handleClose" center :close-on-click-modal="false">
+    <div style="border: 1px solid #ccc;">
+      <Toolbar
+        style="border-bottom: 1px solid #ccc"
+        :editor="editor"
+        :default-config="toolbarConfig"
+        :mode="mode"
       />
+      <Editor
+        v-model="seasonContent"
+        style="height: 500px; overflow-y: hidden;"
+        :default-config="editorConfig"
+        :mode="mode"
+        @onCreated="onCreated"
+      />
+    </div>
     <span slot="footer" class="dialog-footer">
       <el-button v-loading="loading" type="primary" @click="doSave">{{ $t('global.confirm') }}</el-button>
       <el-button @click="handleClose">{{ $t('global.cancel') }}</el-button>
@@ -18,21 +23,33 @@
 </template>
 <script>
 import { editSeasonContent, getSeasonContent } from '@/api/contest';
-import QuillEditor from '@/components/QuillEditor/index';
+// import QuillEditor from '@/components/QuillEditor/index';
+import '@wangeditor/editor/dist/css/style.css';
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
 export default {
     name: 'EditContent',
-    components: {
-        QuillEditor
-    },
+    components: { Editor, Toolbar },
     data() {
         return {
             dialogVisible: false,
             seasonContent:'',
             id: '',
-            loading: false
+            loading: false,
+            editor: null,
+            toolbarConfig: { },
+            editorConfig: { placeholder: '请输入内容...' },
+            mode: 'default' // or 'simple'
         };
     },
+    beforeDestroy() {
+        const editor = this.editor;
+        if (editor == null) return;
+        editor.destroy(); // 组件销毁时，及时销毁编辑器
+    },
     methods:{
+        onCreated(editor) {
+            this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
+        },
         doShow(row) {
             this.dialogVisible = true;
             if (row) {