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

<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="onEditorCreated"
    />
    <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 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,
    MaterialSelector,
  },
  props: {
    initialHtml: {
      type: String,
      defaut: '',
    }
  },
  data() {
    return {
      editor: null,
      html: this.initialHtml,
      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: {
    onEditorCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    onClickOk() {
      this.$emit('ok', this.html)
    },
    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.$videoImgOriginalSize)
      }
    },
  },
  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>