编辑器-热点-文章类型的热点-富文本编辑器：选择图片和视频的功能。

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

@@ -11,7 +11,7 @@
       v-model="html"
       :defaultConfig="editorConfig"
       :mode="mode"
-      @onCreated="onCreated"
+      @onCreated="onEditorCreated"
     />
     <div class="bottom-bar">
       <button 
@@ -27,15 +27,42 @@
         {{$i18n.t('common.ok')}}
       </button>
     </div>
+
+    <div class="dialog" style="z-index: 2000" v-if="isShowImageSelectionWindow">
+      <MaterialSelector
+        :title="$i18n.t('gather.select_material')"
+        @cancle="isShowImageSelectionWindow = false"
+        @submit="onSubmitFromImageMaterialSelector"
+        :selectableType="['image']"
+        :initialMaterialType="'image'"
+        :isMultiSelection="true"
+      />
+    </div>
+
+    <div class="dialog" style="z-index: 2000" v-if="isShowVideoSelectionWindow">
+      <MaterialSelector
+        :title="$i18n.t('gather.select_material')"
+        @cancle="isShowVideoSelectionWindow = false"
+        @submit="onSubmitFromVideoMaterialSelector"
+        :selectableType="['video']"
+        :initialMaterialType="'video'"
+        :isMultiSelection="true"
+      />
+    </div>
   </div>
 </template>
 
 <script>
 import Vue from 'vue'
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import MaterialSelector from "@/components/materialSelector.vue";
 
 export default Vue.extend({
-  components: { Editor, Toolbar },
+  components: {
+    Editor,
+    Toolbar,
+    MaterialSelector,
+  },
   props: {
     initialHtml: {
       type: String,
@@ -46,13 +73,34 @@ export default Vue.extend({
     return {
       editor: null,
       html: this.initialHtml,
-      toolbarConfig: { },
-      editorConfig: { placeholder: '' },
-      mode: 'default', // or 'simple'
+      toolbarConfig: {
+      },
+      editorConfig: {
+        placeholder: 'fdf',
+        MENU_CONF: {
+          uploadImage: {
+            customBrowseAndUpload: (insertFn) => {
+              this.isShowImageSelectionWindow = true
+              this.insertFn = insertFn
+            }
+          },
+          uploadVideo: {
+            customBrowseAndUpload: (insertFn) => {
+              this.isShowVideoSelectionWindow = true
+              this.insertFn = insertFn
+            }
+          },
+        },
+      },
+      mode: 'default', // or 'simple',
+
+      isShowImageSelectionWindow: false,
+      isShowVideoSelectionWindow: false,
+      insertFn: null,
     }
   },
   methods: {
-    onCreated(editor) {
+    onEditorCreated(editor) {
       this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
     },
     onClickOk() {
@@ -60,7 +108,20 @@ export default Vue.extend({
     },
     onClickCancel() {
       this.$emit('cancel')
-    }
+    },
+    onSubmitFromImageMaterialSelector(selected) {
+      this.isShowImageSelectionWindow = false
+      for (const selectedItem of selected) {
+        this.insertFn(selectedItem.icon, `[${this.$i18n.t('gather.image')}: ${selectedItem.name}]`)
+      }
+    },
+    onSubmitFromVideoMaterialSelector(selected) {
+      this.isShowVideoSelectionWindow = false
+      for (const selectedItem of selected) {
+        console.log(selectedItem);
+        this.insertFn(selectedItem.ossPath, selectedItem.ossPath + this.$videoImg)
+      }
+    },
   },
   mounted() {
   },

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

@@ -71,13 +71,16 @@ export default {
     }
   }
 
-  .rich-text-editor {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    &.w-e-full-screen-container {
-      transform: initial !important;
+  .dialog {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .rich-text-editor {
+      flex: 0 0 auto;
+      width: 65%;
+      &.w-e-full-screen-container {
+        transform: initial !important;
+      }
     }
   }
 }