@form-component/common-antd-vue/lib/form/component/RichEditor/index.js

组件库开发及组件复用

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _vue = require("vue");

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _quill = _interopRequireDefault(require("quill"));

var _katex = _interopRequireDefault(require("katex"));

require("katex/dist/katex.css");

require("quill/dist/quill.snow.css");

require("quill/dist/quill.bubble.css");

var _quillBetterTable = _interopRequireDefault(require("quill-better-table"));

require("quill-better-table/dist/quill-better-table.css");

var _get = _interopRequireDefault(require("lodash/get"));

var _set = _interopRequireDefault(require("lodash/set"));

var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

const win = window;
win.katex = _katex.default;

// 注册table组件
_quill.default.register({
  'modules/better-table': _quillBetterTable.default
}, true);

var _default = (0, _vue.defineComponent)({
  emits: ['onFocus', 'onBlur', 'onChange', 'onReady'],
  props: {
    options: {
      type: Object,
      default: {}
    },
    // 表格参数行列
    insertTable: {
      type: Array,
      default: [3, 3]
    },
    // 内容值
    content: String
  },

  setup(props, context) {
    const {
      options,
      insertTable
    } = props;
    const {
      slots,
      emit,
      attrs
    } = context;
    const editRef = (0, _vue.ref)(null);
    const vueEditRef = (0, _vue.ref)(null);
    const data = (0, _vue.reactive)({
      _content: ''
    });
    const tableParams = {
      table: false,
      'better-table': {
        operationMenu: {
          // table右键事件重命名
          items: {
            insertColumnRight: {
              text: '右侧插入一列'
            },
            insertColumnLeft: {
              text: '左侧插入一列'
            },
            insertRowUp: {
              text: '上侧插入一行'
            },
            insertRowDown: {
              text: '下侧插入一行'
            },
            mergeCells: {
              text: '合并单元格'
            },
            unmergeCells: {
              text: '拆分单元格'
            },
            deleteColumn: {
              text: '删除当前列'
            },
            deleteRow: {
              text: '删除当前行'
            },
            deleteTable: {
              text: '删除表格'
            }
          },
          color: {
            colors: ['#E53333', '#E56600', '#FF9900', '#64451D', '#DFC5A4', '#FFE500', '#009900', '#006600', '#99BB00', '#B8D100', '#60D978', '#00D5FF', '#337FE5', '#003399', '#4C33E5', '#9933E5', '#CC33E5', '#EE33EE', '#FFFFFF', '#CCCCCC', '#999999', '#666666', '#333333', '#000000'],
            text: '背景颜色'
          }
        },
        keyboard: {
          bindings: _quillBetterTable.default.keyboardBindings //绑定table右键事件

        }
      }
    };
    const handlers = {
      quill: undefined,

      table() {
        // 工具栏点击事件修改
        const quill = this.quill;
        const tableModule = quill.getModule('better-table');
        tableModule.insertTable(...insertTable);
      }

    };
    const container = [[{
      'header': [1, 2, false]
    }], ['bold', 'italic', 'underline', 'strike', 'blockquote'], [{
      'script': 'sub'
    }, {
      'script': 'super'
    }], [{
      'align': []
    }], [{
      'color': []
    }], [{
      'indent': '-1'
    }, {
      'indent': '+1'
    }], [{
      'list': 'ordered'
    }, {
      'list': 'bullet'
    }], [{
      'direction': 'rtl'
    }], ["formula"], // 函数功能
    ['link', 'image', 'video'], ['table'], // 引入table到工具栏
    ['clean']];
    const defaultOptions = {
      theme: 'snow',
      // 设置主题
      modules: _objectSpread({
        toolbar: {
          container: container,
          handlers: handlers
        }
      }, tableParams)
    };
    const optionsRef = (0, _vue.ref)(null);
    (0, _vue.onMounted)(() => {
      optionsRef.value = _objectSpread({}, defaultOptions);

      if (!(0, _isEmpty.default)(options)) {
        optionsRef.value = _objectSpread(_objectSpread(_objectSpread({}, defaultOptions), options), {}, {
          modules: _objectSpread(_objectSpread({}, options.modules), tableParams)
        });
      }

      if ((0, _isEmpty.default)((0, _get.default)(options, 'modules.toolbar.container', ''))) {
        (0, _set.default)(optionsRef.value, 'modules.toolbar.container', container);
      }

      if ((0, _isEmpty.default)((0, _get.default)(options, 'modules.toolbar.handlers'))) {
        (0, _set.default)(optionsRef.value, 'modules.toolbar.handlers', handlers);
      }

      editRef.value = new _quill.default('#vue-editor', optionsRef.value);
      editRef.value.on('selection-change', range => {
        if (range) {
          emit('onFocus', editRef.value);
        } else {
          emit('onBlur', editRef.value);
        }
      });
      editRef.value.on('text-change', (...args) => {
        let Html = vueEditRef.value.children[0].innerHTML;
        const quill = editRef.value;
        const text = editRef.value.getText();

        if (Html === '<p><br></p>') {
          Html = '';
        } // console.log(attrs)


        attrs['onUpdate:value'] && attrs['onUpdate:value'](Html);
        data._content = Html;
        emit('onChange', {
          html: Html,
          text,
          quill
        });
      });
      emit('onReady', editRef.value);
      handleEffect(attrs.value || props.content);
    });

    const handleEffect = value => {
      if (editRef.value) {
        if (value && value !== data._content) {
          data._content = value;
          vueEditRef.value.children[0].innerHTML = value;
        } else if (!value) {
          vueEditRef.value.children[0].innerHTML = '';
        }
      }
    };

    (0, _vue.watch)([() => props.content], ([value]) => {
      if (attrs.value) {
        return false;
      }

      handleEffect(value);
    }, {
      deep: true,
      immediate: true
    });
    (0, _vue.onBeforeUnmount)(() => {
      editRef.value = null;
    });
    return () => (0, _vue.createVNode)("div", {
      "className": 'editor-contain'
    }, [(0, _vue.createVNode)("div", {
      "id": "toolbar"
    }, [slots.toolbarCustomer && slots.toolbarCustomer()]), (0, _vue.createVNode)("div", {
      "id": "vue-editor",
      "ref": vueEditRef
    }, null)]);
  }

});

exports.default = _default;