编辑器-热点-文章

packages/qjkankan-editor/package.json

@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^0.5.4",
+    "@wangeditor/editor-for-vue": "^1.0.2",
     "core-js": "^3.8.2",
     "d3": "^7.8.0",
     "element-ui": "^2.15.1",

packages/qjkankan-editor/src/components/RichTextEditor.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="rich-text-editor">
+    <Toolbar
+      style="border-bottom: 1px solid #ccc"
+      :editor="editor"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+    />
+    <Editor
+      style="height: 500px; overflow-y: hidden;"
+      v-model="html"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      @onCreated="onCreated"
+    />
+    <div class="bottom-bar">
+      <button 
+        class="ui-button"
+        @click="onClickCancel"
+      >
+        {{$i18n.t('common.cancel')}}
+      </button>
+      <button 
+        class="ui-button submit"
+        @click="onClickOk"
+      >
+        {{$i18n.t('common.ok')}}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+
+export default Vue.extend({
+  components: { Editor, Toolbar },
+  props: {
+    initialHtml: {
+      type: String,
+      defaut: '',
+    }
+  },
+  data() {
+    return {
+      editor: null,
+      html: this.initialHtml,
+      toolbarConfig: { },
+      editorConfig: { placeholder: '' },
+      mode: 'default', // or 'simple'
+    }
+  },
+  methods: {
+    onCreated(editor) {
+      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
+    },
+    onClickOk() {
+      this.$emit('ok', this.html)
+    },
+    onClickCancel() {
+      this.$emit('cancel')
+    }
+  },
+  mounted() {
+  },
+  beforeDestroy() {
+    const editor = this.editor
+    if (editor == null) return
+    editor.destroy() // 组件销毁时，及时销毁编辑器
+  }
+})
+</script>
+
+<style src="@wangeditor/editor/dist/css/style.css"></style>
+
+<style lang="less" scoped>
+.rich-text-editor {
+  // border: 1px solid #ccc;
+  border-radius: 4px;
+  overflow: hidden;
+  > .bottom-bar {
+    padding: 10px;
+    background-color: #fff;
+    border-top: 1px solid #ccc;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    > button {
+      margin-left: 10px;
+    }
+  }
+}
+</style>

packages/qjkankan-editor/src/views/hotspot/HotSpotList.vue

@@ -308,7 +308,7 @@ export default {
             url: '',
           },
           articleInfo: {
-            name: '',
+            html: '',
           }
         }
       } else {
@@ -371,7 +371,7 @@ export default {
         }
         if (!hotspotData.articleInfo) {
           hotspotData.articleInfo = {
-            selected: false,
+            html: '',
           }
         }
         /**

packages/qjkankan-editor/src/views/hotspot/hotspotType/article.vue

@@ -1,42 +1,49 @@
 <template>
   <div class="article-hotspot-setting">
-    <button class="add-btn" v-if="!hotspot.articleInfo.name" @click="onClickAdd">
-      <i class="iconfont icon-editor_add"></i>
-      {{$i18n.t('hotspot.add_article')}}
+    <button class="change-btn" @click="onClickEdit">
+      <img class="icon-editor_update" src="@/assets/images/icons/edit.png" alt="" draggable="false">
+      {{$i18n.t('hotspot.edit_article')}}
     </button>
-    <template v-else>
-      <div class="article-display">
-        <div class="name" v-title="hotspot.articleInfo.name">{{hotspot.articleInfo.name}}</div>
-        <i class="iconfont icon-editor_list_delete" @click.stop="del"></i>
-      </div>
-      <button class="change-btn" @click="onClickEdit">
-        <!-- <i class="iconfont icon-editor_update"></i> -->
-        <img class="icon-editor_update" src="@/assets/images/icons/edit.png" alt="" draggable="false">
-        {{$i18n.t('hotspot.edit_article')}}
-      </button>
-    </template>
+      
+    <div class="dialog" style="z-index: 2000" v-if="isShowEditor">
+      <RichTextEditor
+        class="rich-text-editor"
+        :initialHtml="hotspot.articleInfo.html"
+        @ok="onEditorOk"
+        @cancel="onEditorCancel"
+      />
+    </div>
   </div>
 </template>
 
 <script>
 import { mapGetters } from "vuex";
+import RichTextEditor from "@/components/RichTextEditor.vue";
 
 export default {
+  components: {
+    RichTextEditor,
+  },
+  data() {
+    return {
+      isShowEditor: false,
+    }
+  },
   computed: {
     ...mapGetters({
       hotspot: 'hotspot',
     }),
   },
   methods: {
-    onClickAdd() {
-      this.hotspot.articleInfo.name = 'afdsdf'
-    },
     onClickEdit() {
+      this.isShowEditor = true
+    },
+    onEditorOk(v) {
+      this.hotspot.articleInfo.html = v
+      this.isShowEditor = false
     },
-    del() {
-      this.hotspot.articleInfo = {
-        name: '',
-      }
+    onEditorCancel() {
+      this.isShowEditor = false
     }
   }
 }
@@ -44,63 +51,6 @@ export default {
 
 <style lang="less" scoped>
 .article-hotspot-setting {
-  > .add-btn {
-    margin-top: 16px;
-    width: 100%;
-    height: 40px;
-    background: #1A1B1D;
-    border-radius: 2px;
-    border: 1px solid #404040;
-    display: block;
-    color: #0076F6;
-    font-size: 14px;
-    cursor: pointer;
-    &:hover {
-      border-color: @color;
-    }
-    i {
-      font-size: 14px;
-    }
-  }
-  > .article-display {
-    margin-top: 16px;
-    width: 100%;
-    height: 40px;
-    background: #1A1B1D;
-    border-radius: 2px;
-    border: 1px solid #404040;
-    color: #fff;
-    text-align: center;
-    font-size: 14px;
-    position: relative;
-    > .name {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      width: 65%;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      display: inline-block;
-    }
-    > i {
-      display: none;
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      right: 18px;
-      cursor: pointer;
-      &:hover {
-        color: #FA5555;
-      }
-    }
-    &:hover {
-      > i {
-        display: initial;
-      }
-    }
-  }
   > .change-btn {
     margin-top: 16px;
     width: 100%;
@@ -120,5 +70,12 @@ export default {
       height: 14px;
     }
   }
+
+  .rich-text-editor {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
 }
 </style>