更新代码

package.json

@@ -43,6 +43,7 @@
     "vue-video-player": "^5.0.2",
     "vuedraggable": "^2.20.0",
     "vuex": "^3.1.0",
+    "wangeditor": "^4.7.12",
     "xlsx": "^0.11.16"
   },
   "devDependencies": {

src/components/Detail/addOrEdit.vue

@@ -11,7 +11,8 @@
                 </el-cascader>
             </el-form-item> -->
             <el-form-item label="正文：" prop="content">
-                <editor ref="editor" :content="formLabelAlign.content" />
+                <editor v-model="formLabelAlign.content" :isClear="false" @change="change" />
+                <!-- <editor ref="editor" :content="formLabelAlign.content" /> -->
             </el-form-item>
             <el-form-item>
                 <el-button type="primary" @click="submit(formLabelAlign)" :loading="loading">确定</el-button>
@@ -73,6 +74,10 @@
         },
 
         methods: {
+            change(val) {
+                console.log(val)
+            },
+
             // 位置选择
             handleChange(value) {
                 this.formLabelAlign.showPage = value

src/components/Detail/editor.vue

@@ -1,61 +1,47 @@
-<template>
-  <div id="editorSection"></div>
+<template lang="html">
+  <div>
+        <!-- id="editor1"对应挂载方式EditorInit1 -->
+        <!-- <div style="color:black;" id="editor1"></div> -->
+        <!-- ref="editor2"对应挂载方式EditorInit2 -->
+        <div style="color:black;text-align: left;" ref="editor2"></div>
+    </div>
 </template>
 
 <script>
-import Editor from "tui-editor"; /* ES6 */
-import "tui-editor/dist/tui-editor.css"; // editor's ui
-import "tui-editor/dist/tui-editor-contents.css"; // editor's content
-import "codemirror/lib/codemirror.css"; // codemirror
-import "highlight.js/styles/github.css"; // code block highlight
-import { init } from "echarts/lib/echarts";
+  import E from 'wangeditor'
+ export default {
+    methods:{
+        // WangEditor两种挂载方法，一种挂在id（EditorInit1），一种挂在ref（EditorInit2）
+        EditorInit1(){
+            const editor1 = new E ('#editor1');
+            editor1.create();
+        },
+        EditorInit2(){
+            const temp = this.$refs.editor2;
+            const editor2 = new E (temp);
+            editor2.create();
+        },
+    mounted(){
+        //记得在生命周期mounted中加上咱们写的函数，这里用EditorInit1或是EditorInit2都可以
+        this.EditorInit2();
+        },
 
-export default {
-  props:{
-    content:{
-      type: String,
-      default: ''
     }
-  },
-  watch: {
-    content(val){
-      if(val){
-        this.setValue(val)
-      }
-    }
-  },
-  mounted() {
-    this.initialize();
-    this.$nextTick(() => {
-      this.setValue(this.content)
-    })
-  },
-  beforeDestroy() {
-    this.tuieditor = null;
-    delete this.tuieditor;
-  },
-  methods: {
-    initialize() {
-      if (this.$el) {
-        this.tuieditor = new Editor({
-          el: document.querySelector("#editorSection"),
-          initialEditType: "wysiwyg",
-          previewStyle: "vertical",
-          height: "800px",
-        });
-        this.tuieditor.getHtml();
-      }
-    },
-
-    getValue() {
-      return this.tuieditor.getHtml()
-    },
-    setValue(val) {
-      this.tuieditor.setHtml(val);
-    }
-  }
-};
+}
 </script>
 
-<style>
+<style lang="css">
+  .editor {
+    width: 100%;
+    margin: 0 auto;
+    position: relative;
+    z-index: 0;
+  }
+  .toolbar {
+    border: 1px solid #ccc;
+  }
+  .text {
+    border: 1px solid #ccc;
+    min-height: 500px;
+  }
 </style>

src/components/News/addOrEdit.vue

@@ -170,7 +170,7 @@
             }
             const code = localStorage.getItem('code')
             this.code = code
-            if(code === '0204' || code === '0210'){
+            if(code === '0204' || code === '0209' || code === '0210'){
                 this.formLabelAlign.showType = 1
             }
             if(code === '0207'){

src/components/News/search.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-wrap mb-4">
+  <div class="flex flex-wrap my-4">
     <div class="flex flex-row mr-5 mb-4 align-center">
       标题：
       <el-input