From 0cf6219601ffaded28e847c64ed9a33ab83f4fcb Mon Sep 17 00:00:00 2001
From: 15820893422 <1978476055@qq.com>
Date: Tue, 2 Jul 2024 16:01:21 +0800
Subject: [PATCH] 1

---
 admin/src/views/qa/components/wangeditor.vue | 95 ++++++++++++++++++++
 admin/src/views/qa/qa.vue                    | 33 +++++--
 2 files changed, 119 insertions(+), 9 deletions(-)
 create mode 100644 admin/src/views/qa/components/wangeditor.vue

diff --git a/admin/src/views/qa/components/wangeditor.vue b/admin/src/views/qa/components/wangeditor.vue
new file mode 100644
index 00000000..717e511b
--- /dev/null
+++ b/admin/src/views/qa/components/wangeditor.vue
@@ -0,0 +1,95 @@
+<template>
+    <div style="border: 1px solid #ccc" class="relative">
+      <div v-if="disabled" class="disable-layer" />
+      <Toolbar ref="toolbar" style="border-bottom: 1px solid #ccc" :editor="editor" :default-config="toolbarConfig" :mode="mode" />
+      <Editor style="height: 300px; overflow-y: hidden" :value="value" :default-config="editorConfig" :mode="mode" @input="handleInput" @onCreated="onCreated" />
+    </div>
+  </template>
+   
+  <script>
+  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+  import '@wangeditor/editor/dist/css/style.css'
+  export default {
+    name: 'WangEditor',
+    components: { Editor, Toolbar },
+    props: {
+      value: String,
+      disabled: Boolean,
+      cusHeight: {
+        type: String,
+        default: '250px'
+      }
+    },
+    data() {
+      return {
+        editor: null,
+        html: '',
+        toolbarConfig:{
+                toolbarKeys:[
+                'headerSelect',
+
+                "blockquote",
+                "header1",
+                "header2",
+                "header3",
+                "|",
+                "bold",
+                "underline",
+                "italic",
+                "through",
+                "color",
+                "bgColor",
+                "clearStyle",
+                "|",
+                "bulletedList",
+                "numberedList",
+                "todo",
+                "justifyLeft",
+                "justifyRight",
+                "justifyCenter",
+                "|",
+                "insertLink",
+                "insertTable",
+                "codeBlock",
+                "|",
+                "undo",
+                "redo",
+                ]
+            },
+        editorConfig: {
+          placeholder: '请输入内容...'
+        },
+        mode: 'default' 
+      }
+    },
+    mounted() {},
+    created() {},
+    beforeDestroy() {
+      const editor = this.editor
+      if (editor == null) return
+      editor.destroy() // 组件销毁时，及时销毁编辑器
+    },
+    methods: {
+      onCreated(editor) {
+        this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
+      },
+      handleInput(value) {
+        console.log(value)
+        this.$emit('input', value)
+      }
+    }
+  }
+  </script>
+   
+  <style lang="scss" scoped>
+  .disable-layer {
+    width: 100%;
+    height: 100%;
+    background: #f5f7fa;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 99;
+    opacity: 0.5;
+  }
+  </style>
\ No newline at end of file
diff --git a/admin/src/views/qa/qa.vue b/admin/src/views/qa/qa.vue
index 7e69e8bb..700516c8 100644
--- a/admin/src/views/qa/qa.vue
+++ b/admin/src/views/qa/qa.vue
@@ -61,9 +61,11 @@
               </div>
               <div>内容</div>
               <div style="border: 1px solid #ccc;">
-                <Toolbar
+                <myEditor :value="item.content" />
+                <!-- <Toolbar
                   style="border-bottom: 1px solid #ccc"
                   :editor="editor"
+                  :key="index"
                   :defaultConfig="toolbarConfig"
                   :mode="mode"
                 />
@@ -74,7 +76,7 @@
                   :mode="mode"
                   @onChange="onChange"
                   @onCreated="onCreated"
-                />
+                /> -->
               </div>
 <!--              <el-input v-model="item.content" :rows="4" type="textarea" placeholder="内容" />-->
             </div>
@@ -150,11 +152,13 @@
               </div>
               <div>内容</div>
               <div style="border: 1px solid #ccc;">
-                <Toolbar
+                <myEditor :value="item.content"/>
+                <!-- <Toolbar
                   style="border-bottom: 1px solid #ccc"
                   :editor="editor"
                   :defaultConfig="toolbarConfig"
                   :mode="mode"
+                  :key="index"
                 />
                 <Editor
                   style="height: 400px; overflow-y: hidden;"
@@ -163,7 +167,7 @@
                   :mode="mode"
                   @onChange="onChange"
                   @onCreated="onCreated"
-                />
+                /> -->
               </div>
 <!--              <el-input v-model="item.content" :rows="4" type="textarea" placeholder="内容" />-->
             </div>
@@ -212,15 +216,25 @@
 
 <script>
 import Pagination from '@/components/PaginationFixed'
-import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import myEditor from './components/wangeditor'
+// import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 
 export default {
-  name: 'GetQa',
-  components: { Pagination, Editor, Toolbar },
+  name: 'getQa',
+  // components: { Pagination, Editor, Toolbar },
+  components: { Pagination, myEditor},
   data() {
     return {
       editor: null,
-      toolbarConfig: { },
+      toolbarConfig:{
+                toolbarKeys:[
+                'headerSelect',
+                    '|',
+                    // 菜单
+                    'bold','italic',
+                ]
+            },
+
       editorConfig: { placeholder: '请输入内容...' },
       mode: 'default', // or 'simple'
 
@@ -259,10 +273,11 @@ export default {
   },
   methods: {
     onCreated(editor) {
+      console.log('onCreated', editor);
       this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
     },
     onChange(editor) {
-      console.log("onChange", editor.getHtml()); // onChange 时获取编辑器最新内容
+      // console.log("onChange", editor.getHtml()); // onChange 时获取编辑器最新内容
     },
     handleAdd(){
       this.anchors.qaQuestions.push({