vue-admin-core/lib/components/rich-text/src/Editor.js

A Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var editor = require('@wangeditor/editor');
var elementPlus = require('element-plus');
var _const = require('../../../utils/const.js');

const prefixCls = _const.getPrefixCls("editor");
var Editor = vue.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: [elementPlus.UPDATE_MODEL_EVENT, elementPlus.CHANGE_EVENT, "created", "destroyed", "created", "maxLength", "focus", "blur", "customAlert", "customPaste"],
  setup(props, context) {
    const box = vue.ref(null);
    const editorRef = vue.shallowRef(null);
    const editor$1 = vue.ref();
    const curValue = vue.ref("");
    const initEditor = () => {
      if (!box.value)
        return;
      const defaultContent = vue.toRaw(props.defaultContent);
      editor$1.value = editor.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);
    }
    vue.onMounted(() => {
      initEditor();
    });
    vue.onUnmounted(() => {
      const editor2 = editorRef.value;
      if (editor2 == null)
        return;
      editor2.destroy();
    });
    vue.watch(() => props.modelValue, (newVal) => {
      if (newVal === curValue.value)
        return;
      setHtml(newVal);
    });
    vue.watchEffect(() => {
      if (!editor$1.value)
        return;
      if (props.disabled || props.readOnly) {
        editor$1.value.disable();
      } else {
        editor$1.value.enable();
      }
    });
    return () => vue.h("div", {
      ref: box,
      class: [prefixCls, {
        "is-disabled": props.disabled
      }]
    });
  }
});

exports.default = Editor;
//# sourceMappingURL=Editor.js.map