reactjs - 在 quill js 中创建自定义属性

Question

如何在 React-Quill 中创建自定义样式属性？我想为我的 Twitter Blot 添加比对功能。我正在尝试使用 display flex 和 justify content 属性来对齐。我无法实现它。

这是我尝试创建自定义属性的方式:

const Parchment = Quill.import('parchment');
const config = {
  scope: Parchment.Scope.BLOCK,
  whitelist: ['flex', 'block', 'inline-block'],
};
const DisplayAttribute = new Parchment.Attributor.Attribute('display', 'display', config);
const DisplayClass = new Parchment.Attributor.Class('display', 'ql-display', config);
const DisplayStyle = new Parchment.Attributor.Style('display', 'display', config);

const configII = {
  scope: Parchment.Scope.BLOCK,
  whitelist: ['flex-start', 'center', 'flex-end'],
};
const JustifyContentAttribute = new Parchment.Attributor.Attribute('justify-content', 'justify-content', configII);
const JustifyContentClass = new Parchment.Attributor.Class('justify-content', 'ql-justify-content', configII);
const JustifyContentStyle = new Parchment.Attributor.Style('justify-content', 'justify-content', configII);


Quill.register({
  'attributors/attribute/display': DisplayAttribute
});
Quill.register({
  'attributors/class/display': DisplayClass
});
Quill.register({
  'attributors/style/display': DisplayStyle
});
Quill.register({
  'formats/display': DisplayClass
});
Quill.register({
  'attributors/attribute/justify-content': JustifyContentAttribute
});
Quill.register({
  'attributors/class/justify-content': JustifyContentClass
});
Quill.register({
  'attributors/style/justify-content': JustifyContentStyle
});
Quill.register({
  'formats/justify-content': JustifyContentClass
});

这是我的 Twitter Blot:

import ReactQuill from 'react-quill';

// eslint-disable-next-line prefer-destructuring
const Quill = ReactQuill.Quill;
const BlockEmbed = Quill.import('blots/block/embed');
const ATTRIBUTES = ['display', 'justify-content'];

class TwitterBlot extends BlockEmbed {
  static create(obj) {
    const node = super.create();
    node.setAttribute('contenteditable', 'false');
    node.setAttribute('id', obj.id);

    node.dataset.id = obj.id;
    node.dataset.url = obj.url;
    node.dataset.html = obj.html;
    node.dataset.type = obj.type;
    node.setAttribute('display', 'flex');
    node.setAttribute('justify-content', 'flex-start');
    const innerDiv = document.createElement('div');
    innerDiv.innerHTML = obj.html;
    innerDiv.classList.add('disablePointerEvents');
    if (obj.type === 'timeline') {
      const timelineCss = `
      height: 600px;
      width: 500px;
      overflow-x: hidden;
      overflow-y: scroll;
      border: 1px solid #ccc;
    `;
      innerDiv.setAttribute('style', timelineCss);
    }
    // node.setAttribute('style', 'display: flex; justify-content: center;');
    node.appendChild(innerDiv);
    return node;
  }

  static value(domNode) {
    return {
      id: domNode.dataset.id,
      url: domNode.dataset.url,
      html: domNode.dataset.html,
      type: domNode.dataset.type,
    };
  }

  formats() {
    twttr.widgets.load();
  }

  static formats(domNode) {
    // We still need to report unregistered embed formats
    return ATTRIBUTES.reduce((formats, attribute) => {
      if (domNode.hasAttribute(attribute)) {
        // eslint-disable-next-line no-param-reassign
        formats[attribute] = domNode.getAttribute(attribute);
      }
      return formats;
    }, {});
  }

  format(name, value) {
    if (ATTRIBUTES.indexOf(name) > -1) {
      if (value) {
        this.domNode.setAttribute(name, value);
      } else {
        this.domNode.removeAttribute(name);
      }
    } else {
      super.format(name, value);
    }
  }
}

TwitterBlot.blotName = 'tweet';
TwitterBlot.tagName = 'div';
TwitterBlot.className = 'tweet';

export default TwitterBlot;

我只是尝试通过更改印迹的 onClick 函数的对齐方式来测试它

handleEmbedsFormat(e) {
  DisplayAttribute.add(e.target, 'flex');
  JustifyContentAttribute.add(e.target, 'center');
  console.log('---e', e.target);
}

我可以使用普通的 DOM 方法和内联样式对齐印迹。但这种变化并没有反射(reflect)在我的增量中。因此，我试图创建一个自定义属性。我没有找到任何例子。

有人能指出我正确的方向吗？

Answer 1

Parchment 文档 ( Class and Style Attributors ) 中建议的用于注册 Attributor 的方法建议只使用名称(而不是像您的示例中那样使用具有路径键的对象) :

Quill.register(DisplayAttribute);

这是一个正在运行的演示(SpanWrapper/sw 属性):

Parchment = Quill.import('parchment');

let config = { scope: Parchment.Scope.BLOCK };
let SpanWrapper = new Parchment.Attributor.Class('span-wrapper', 'span', config);
Quill.register(SpanWrapper, true)

var toolbarOptions = [
  [{ "header": [false, 1, 2, 3, 4, 5, 6]}, "bold", "italic"],
  ["blockquote", "code-block", "link", "span-wrapper"]
];

var icons = Quill.import('ui/icons');
icons['span-wrapper'] = 'sw';

var quill = new Quill("#editor-container", {
  modules: {
    toolbar: {
      container: toolbarOptions,
      handlers: {
        'span-wrapper': function() {
          var range = quill.getSelection();
          var format = quill.getFormat(range);

          if (!format['span-wrapper']) {
            quill.format('span-wrapper', 'wrapper');
          } else {
            quill.removeFormat(range.index, range.index + range.length);
          }
        }
      }
    }
  },
  theme: "snow"
});

#editor-container {
  height: 375px;
}

.ql-editor .span-wrapper {
  background-color: #F8F8F8;
  border: 1px solid #CCC;
  line-height: 19px;
  padding: 6px 10px;
  border-radius: 3px;
  margin: 15px 0;
}

<link href="//cdn.quilljs.com/1.2.4/quill.snow.css" rel="stylesheet" />
<script src="//cdn.quilljs.com/1.2.4/quill.js"></script>
<div id="editor-container"></div>