vue-admin-core/es/components/rich-text/src/Editor.mjs

A Component Library for Vue 3

import { defineComponent, ref, shallowRef, toRaw, onMounted, onUnmounted, watch, watchEffect, h } from 'vue';
import { createEditor } from '@wangeditor/editor';
import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from 'element-plus';
import { getPrefixCls } from '../../../utils/const.mjs';

const prefixCls = getPrefixCls("editor");
var Editor = defineComponent({
  name: "RickTextToolbar",
  props: {
    /** 编辑器模式 */
    mode: {
      type: String,
      default: "default"
    },
    /** 编辑器默认内容 */
    defaultContent: {
      type: Array,
      default: () => []
    },
    defaultHtml: {
      type: String,
      default: ""
    },
    /** 编辑器默认配置 */
    defaultConfig: {
      type: Object,
      default: () => ({})
    },
    /* 自定义 v-model */
    modelValue: {
      type: String,
      default: ""
    },
    /** 是否禁用 */
    disabled: {
      type: Boolean
    },
    readOnly: {
      type: Boolean
    },
    placeholder: {
      type: String
    }
  },
  emits: [UPDATE_MODEL_EVENT, CHANGE_EVENT, "created", "destroyed", "created", "maxLength", "focus", "blur", "customAlert", "customPaste"],
  setup(props, context) {
    const box = ref(null);
    const editorRef = shallowRef(null);
    const editor = ref();
    const curValue = ref("");
    const initEditor = () => {
      if (!box.value)
        return;
      const defaultContent = toRaw(props.defaultContent);
      editor.value = createEditor({
        selector: box.value,
        mode: props.mode,
        content: defaultContent || [],
        html: props.defaultHtml || props.modelValue || "",
        config: {
          ...props.defaultConfig,
          placeholder: props.placeholder,
          readOnly: props.disabled || props.readOnly,
          onCreated(editor2) {
            editorRef.value = editor2;
            context.emit("created", editor2);
          },
          onChange(editor2) {
            const editorHtml = editor2.getHtml();
            curValue.value = editorHtml;
            context.emit("update:modelValue", editorHtml);
            context.emit("change", editor2);
          },
          onDestroyed(editor2) {
            context.emit("destroyed", editor2);
          },
          onMaxLength(editor2) {
            context.emit("maxLength", editor2);
          },
          onFocus(editor2) {
            context.emit("focus", editor2);
          },
          onBlur(editor2) {
            context.emit("blur", editor2);
          },
          customAlert(info, type) {
            context.emit("customAlert", info, type);
          },
          customPaste: (editor2, event) => {
            let res;
            context.emit("customPaste", editor2, event, (val) => {
              res = val;
            });
            return res;
          }
        }
      });
    };
    function setHtml(newHtml) {
      const editor2 = editorRef.value;
      if (editor2 == null)
        return;
      editor2.setHtml(newHtml);
    }
    onMounted(() => {
      initEditor();
    });
    onUnmounted(() => {
      const editor2 = editorRef.value;
      if (editor2 == null)
        return;
      editor2.destroy();
    });
    watch(() => props.modelValue, (newVal) => {
      if (newVal === curValue.value)
        return;
      setHtml(newVal);
    });
    watchEffect(() => {
      if (!editor.value)
        return;
      if (props.disabled || props.readOnly) {
        editor.value.disable();
      } else {
        editor.value.enable();
      }
    });
    return () => h("div", {
      ref: box,
      class: [prefixCls, {
        "is-disabled": props.disabled
      }]
    });
  }
});

export { Editor as default };
//# sourceMappingURL=Editor.mjs.map