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

<template>
  <div class="rich-text-editor">
    <div class="editor-title">
      <div class="title">
        <span>
          {{ title ? title : $i18n.t("hotspot.edit_article_title") }}
        </span>
      </div>
    </div>
    <Toolbar
      v-if="isShowToolbar"
      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"
      class="editor"
      @change="onEditorChange"
      @onMaxLength="onEditorMaxLength"
      @onCreated="onEditorCreated"
    />
    <div class="bottom-bar">
      <button class="ui-button deepcancel" @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 { i18nChangeLanguage, i18nGetResources } from "@wangeditor/editor";
import browser from "@/utils/browser";
import MaterialSelector from "@/components/materialSelector.vue";

export default Vue.extend({
  components: {
    Editor,
    Toolbar,
    MaterialSelector,
  },
  props: {
    title: {
      type: String,
      default: "",
    },
    limit: {
      type: Number,
      default: 0,
    },
    placeholder: {
      type: String,
      default: "",
    },

    initialHtml: {
      type: String,
      default: "",
    },
    isShowToolbar: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      editor: null,
      html: this.initialHtml,
      size: 0,
      toolbarConfig: {},
      editorConfig: {
        placeholder: this.placeholder,
        maxLength: this.limit > 0 ? this.limit : null,

        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() ，否则会报错
      console.log("this.editor", this.editor);
      let lang = browser.urlQueryValue("lang");

      if (lang === "en") {
        i18nChangeLanguage("en");
      }
      if (lang === "zh") {
        i18nChangeLanguage("zh-CN");
      }
    },
    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
        );
      }
    },
    onEditorChange(content) {
      console.log("content", content);
      this.size = content.size;
    },
    onEditorMaxLength() {
      console.log("超出大小");
    },
  },
  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;
  .editor {
    border: 1px solid #545454;
  }
  .editor-title {
    height: 64px;
    .title {
      font-size: 18px;
      color: rgba(255, 255, 255, 0.6);
      line-height: 24px;
    }
  }
  border-radius: 4px;
  overflow: hidden;
  padding: 26px;
  background-color: rgba(26, 27, 29, 1);
  > .bottom-bar {
    padding: 10px 26px 0 26px;
    margin: 40px -26px 0 -26px;
    background-color: rgba(26, 27, 29, 1);
    // border-top: 1px solid #ccc;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    > button {
      margin-left: 10px;
    }
  }
}
</style>
<style>
:root {
  --w-e-textarea-bg-color: #333;
  --w-e-textarea-color: #fff;
  --w-e-toolbar-active-bg-color: #666;
  --w-e-toolbar-color: #fff;
  --w-e-toolbar-bg-color: rgba(0, 0, 0, 0.9);
  --w-e-toolbar-active-color: #fff;
  --w-e-modal-button-bg-color: rgba(0, 0.5);
}
</style>