格式化嵌入印迹鹅毛笔JS中的文本

Question

如何格式化羽毛笔中的污点内的文本？例如，我有一个带有标题的图像印迹。我想将标题中的一个单词或一组单词转换为超链接。我该怎么办？

这是我的图像污点：

/* eslint-disable no-param-reassign */
import ReactQuill from 'react-quill';

const Quill = ReactQuill.Quill;
const BlockEmbed = Quill.import('blots/block/embed');

const ATTRIBUTES = ['height', 'width', 'src', 'style', 'align', 'link', 'bold'];

class ImageBlot extends BlockEmbed {
  static create(value) {
    const node = super.create();
    node.classList.add('embed');
    const innerDiv = document.createElement('div');
    innerDiv.classList.add('disablePointerEvents');
    const img = document.createElement('img');
    img.setAttribute('src', value.url);

    const caption = document.createElement('p');
    caption.setAttribute('align', 'center');
    caption.setAttribute('contenteditable', 'true');
    caption.innerHTML = value.caption;

    innerDiv.appendChild(img);
    innerDiv.appendChild(caption);

    node.appendChild(innerDiv);
    return node;
  }

  static formats(domNode) {
    return ATTRIBUTES.reduce((formats, attribute) => {
      if (domNode.hasAttribute(attribute)) {
        formats[attribute] = domNode.getAttribute(attribute);
      }
      const innerDiv = domNode.querySelector('div');
      if (innerDiv.hasAttribute(attribute)) {
        formats[attribute] = innerDiv.getAttribute(attribute);
      }
      const imageElement = domNode.querySelector('img');
      if (imageElement.hasAttribute(attribute)) {
        formats[attribute] = imageElement.getAttribute(attribute);
      }
      const captionElement = domNode.querySelector('p');
      if (captionElement.hasAttribute(attribute)) {
        formats[attribute] = captionElement.getAttribute(attribute);
      }
      return formats;
    }, {});
  }

  static match(url) {
    return /\.(jpe?g|gif|png)$/.test(url) || /^data:image\/.+;base64/.test(url);
  }

  static value(domNode) {
    const imageElement = domNode.querySelector('img');
    const captionElemnt = domNode.querySelector('p');
    const url = imageElement.getAttribute('src');
    const caption = captionElemnt.innerHTML;
    return { url, caption };
  }

  format(name, value) {
    if (ATTRIBUTES.indexOf(name) > -1) {
      if (name === 'width' || name === 'height') {
        const imageElement = this.domNode.querySelector('img');
        if (value) {
          imageElement.setAttribute(name, value);
        } else {
          imageElement.removeAttribute(name);
        }
      } else if (name === 'bold') {
        const captionElement = this.domNode.querySelector('p');
        if (value) {
          captionElement.setAttribute(name, value);
        } else {
          captionElement.removeAttribute(name);
        }
      } else if (value) {
        this.domNode.setAttribute(name, value);
      } else {
        this.domNode.removeAttribute(name);
      }
    } else {
      super.format(name, value);
    }
  }

}

ImageBlot.blotName = 'image';
ImageBlot.tagName = 'div';
ImageBlot.className = 'image';

export default ImageBlot;

我只是试图将标题加粗，而这是我无法做到的。当我尝试使用笔芯工具栏操作格式化污点内的文本时，该样式不适用。

有人可以帮我吗？