Может ли Quill BlockEmbeds использовать произвольные теги?

У меня есть куча компонентов (фрагменты html и логики), которые я хочу встроить в документ Quill, и я не совсем уверен, с чего начать. Каждый компонент имеет один корневой элемент, но имя тега произвольное (есть теги aside, div, section и т. д.). Каждый из компонентов имеет совершенно другой опыт редактирования, отличный от Quill (который обрабатывается в другом месте), поэтому в идеале их дельты должны выглядеть так:

{
  ops: [
    { insert: 'Hello', attributes: { bold: true } },
    { insert: { component: 'domain.com/components/image/instances/foo' } },
    { insert: 'World!\n' }
  ]
}

Кажется, я где-то читал в документации, что кляксы на уровне блоков должны указывать tagName или className, но я не могу найти ссылку на это. Все примеры, которые я могу найти с помощью BlockEmbed указать tagName, и документы Parchment на самом деле не объясняют этого. Есть ли правильный способ сделать это и есть ли крайние случаи, о которых мне следует знать?

Все эти компоненты будут блочными, поэтому (из моего чтения этой проблемы ) Я не думаю, что выбор должен быть проблемой, верно?


javascript parchment quill
person nelsonpecora    schedule 31.07.2017    source источник
comment
Я считаю, что github.com/quilljs/parchment#blots — это ссылка, которую вы ищете. Я планирую написать больше/улучшенную документацию для Parchment, но похоже, что вы хотите унаследовать BlockEmbed (blots/block.js), поскольку опыт редактирования находится в другом месте.   -  person jhchen    schedule 01.08.2017
comment
Ага, вот о чем я думал. В частности, как минимум, блот должен быть назван статическим именем блота и связан либо с именем тега, либо с именем класса. Что произойдет, если я укажу имя класса, но не имя тега? Я не могу найти никаких примеров этого на практике (из StackOverflow, проблем с github и т. д.)   -  person nelsonpecora    schedule 01.08.2017

Ответы (1)


arrow_upward
9
arrow_downward

посмотрите здесь и здесь

если ваша цель — создать тег, которого нет в QUILL, вам нужно сделать что-то вроде этого: НАСТРОЙТЕ СВОЙ ПОЛЬЗОВАТЕЛЬСКИЙ ТЕГ

 var Embed = Quill.import('blots/embed');
class MyCustomTag extends Embed {
    static create(paramValue) {
        let node = super.create();
        node.innerHTML = paramValue;
        //node.setAttribute('contenteditable', 'false');
        //node.addEventListener('click', MyCustomTag.onClick);
        return node;
    }

    static value(node) {
        return node.innerHTML;
    }
}

MyCustomTag.blotName = 'my-custom-tag';
MyCustomTag.className = 'my-custom-tag';
MyCustomTag.tagName = 'my-custom-tag';
//in case you need to inject an event from outside
/* MyCustomTag.onClick = function(){
     //do something
 }*/

Quill.register(MyCustomTag);

ИСПОЛЬЗУЙТЕ СОБСТВЕННЫЙ ТЕГ

this.editor.insertEmbed(
0, //INDEX_WHERE_YOU_TO_INSERT_THE_CONTENT, 
'my-custom-tag',//THE NAME OF YOUR CUSTOM TAG
 '<span>MY CONTENT</SPAN>'// THE CONTENT YOUR TO INSERT 
);

Обратите внимание, по умолчанию этот пользовательский атрибут получит атрибут display: block, вы можете указать его, например, с помощью правила css.

my-custom-tag {
   display : inline;
}
person Michele Dibenedetto    schedule 05.09.2017