Quill.js: создание пользовательских форматов ссылок или пользовательских форматов с тем же именем тега

Я использую Quill 1.0.0-rc.1. Как я могу сделать несколько различных типов форматов ссылок? Я сделал три различных типа форматов ссылок, которые добавляют атрибут data-link-type. Когда я создаю ссылки, все в порядке. Однако, когда я перезагружаю содержимое в редактор с помощью pasteHTML, выигрывает последний зарегистрированный формат, поскольку все tagName имеют значение «A», и поэтому всем data-link-type присваивается значение resource.

Итак, это:

<p>These are the links: 
  <a href="http://www.google.com" data-link-type="external">External</a> 
  <a href="/resources/3" data-link-type="resource">Resource</a>
  <a href="/pages/12" data-link-type="internal">Internal</a>
</p>

Становится так:

<p>These are the links: 
  <a href="http://www.google.com" data-link-type="resource">External</a> 
  <a href="/resources/3" data-link-type="resource">Resource</a>
  <a href="/pages/12" data-link-type="resource">Internal</a>
</p>

Я включил ручку кода:

http://codepen.io/anon/pen/akxNNK

var Inline = Quill.import('blots/inline');

class ExternalLink extends Inline {
  static create(value) {
    let node = super.create(value);
    value = value.trim();
    if (!value.match(/^http|mailto/)) {
      value = 'http://' + value
    }
    node.setAttribute('href', value);
    node.setAttribute('data-link-type', 'external');
    return node;
  }

  static formats(domNode) {
    return domNode.getAttribute('href');
  }
}

ExternalLink.blotName = 'external_link';
ExternalLink.tagName = 'A';


class InternalLink extends Inline {
  static create(value) {
    let node = super.create(value);
    if (!value.match(/^\/pages\//)) {
      value = '/pages/' + value
    }
    node.setAttribute('href', value);
    node.setAttribute('data-link-type', 'internal');
    return node;
  }

  static formats(domNode) {
    return domNode.getAttribute('href');
  }
}

InternalLink.blotName = 'internal_link';
InternalLink.tagName = 'A';


class ResourceLink extends Inline {
  static create(value) {
    let node = super.create(value);
    if (!value.match(/^\/resources\//)) {
      value = '/resources/' + value
    }
    node.setAttribute('href', value);
    node.setAttribute('data-link-type', 'resource');
    return node;
  }

  static formats(domNode) {
    return domNode.getAttribute('href');
  }
}

ResourceLink.blotName = 'resource_link';
ResourceLink.tagName = 'A';


Quill.register({
  'formats/internal_link': InternalLink,
  'formats/external_link': ExternalLink,
  'formats/resource_link': ResourceLink
});


var quill = new Quill(
  '#editor-container',
  { theme: 'snow' }
);

quill.pasteHTML('<p>These are the links: <a href="http://www.google.com" data-link-type="external">External</a> <a href="/resources/3" data-link-type="resource">Resource</a> <a href="/pages/12" data-link-type="internal">Internal</a></p>');

person Lee    schedule 18.08.2016    source источник


Ответы (1)


Quill может использовать tagName и/или className для сопоставления узлов DOM с моделью документа. Просто установить атрибут в create недостаточно. Это делается намеренно, чтобы позволить устанавливать посторонние атрибуты, такие как target или rel, без которых они не вносят значимого содержимого в документ (если атрибут имеет смысл, вы должны использовать Атрибутор).

В этом разветвленном CodePen ваш пример работает с className. Обратите внимание, что если имя класса отсутствует, будет использоваться имя тега, которое зависит от порядка регистрации.

person jhchen    schedule 18.08.2016