Форматировать текст внутри вставки блот Quill JS - PullRequest
Новая
       8

Форматировать текст внутри вставки блот Quill JS

0 голосов
/ 18 декабря 2018

Как я могу отформатировать текст, который находится внутри блот в гусиное перо?Например, у меня есть блот изображения, который также имеет подпись.Я хочу превратить слово или набор слов в заголовке в гиперссылку.Как бы я это сделал?

вот мое пятно изображения: 

/* 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;

Я просто попытался сделать заголовок жирным, чего не смог.Когда я пытаюсь отформатировать текст внутри блоттинга с помощью действия на панели инструментов, он не применяет стили.

Может кто-нибудь мне помочь?

...