Создать пользовательский атрибут в Quill JS - PullRequest
Новая
       4

Создать пользовательский атрибут в Quill JS

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

Как я могу создать собственный атрибут стиля в React-Quill?Я хочу добавить функциональность выравнивания в мой блот Twitter.Я пытаюсь использовать дисплей Flex и обосновать свойство контента для выравнивания.Я не могу это реализовать.

Вот как я пытался создать пользовательский атрибут: 

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
});

А вот и мой блот в Твиттере: 

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 блока Blot 

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

Я могу выровнять блот, используя обычные методы DOM и inline-стили.Но эти изменения не отражаются в моей дельте.Поэтому я пытался создать собственный атрибут.Я не нашел примеров по этому поводу.

Может ли кто-нибудь указать мне правильное направление?

1 Ответ

0 голосов
/ 12 мая 2019

Метод регистрации 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>
...