Что, как и когда использовать статические форматы, форматы и формат в пользовательском блоте?

ОПИСАНИЕ

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

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

class TextHighlight extends Inline {
    static create(value) {
        let node = super.create();
        if(!value || value < 1) return node;

        if(value == 5){
            node.style.color = 'rgb(225, 225, 225)';
        }
        else {
            node.style.borderRadius = '2px';
            node.style.padding = '2px';

            if(value == 1){ node.style.background = 'rgb(254, 255, 171)'; }
            if(value == 2){ node.style.background = 'rgb(255, 171, 171)'; }
            if(value == 3){ node.style.background = 'rgb(171, 207, 255)'; }
            if(value == 4){ node.style.background = 'rgb(178, 255, 171)'; }
        }

        node.setAttribute('data-value' , value);
        return node;
    }

    formats() {
        console.log('#formats()');
        let result = this.domNode.getAttribute('data-value');
        return result ? result : 0;
    }
}

TextHighlight.blotName = 'texthighlight';
TextHighlight.tagName = 'span';

Моя функция удаления / добавления:

function highlightSelectedText(value) {
   if (value < 0 || value > 5) return false;

   var range = quill.getSelection();

   if (range && range.length > 0) {
      if (value > 0) {
         quill.formatText(
            range.index,
            range.length,
            'texthighlight',
            value,
            true);
      }
      else {
         quill.formatText(range.index, range.length, 'texthighlight', false, false);
      }
   }
}

И, наконец, создание экземпляра Quill:

var toolbarOptions = {
    container: '#toolbar-container',
    handlers: {
        'texthighlight': function (value) {
            highlightSelectedText(value);
        }
    }
};

var quill = new Quill('#editor', {
    theme: 'bubble',
    modules: {
        toolbar: toolbarOptions
    }
});

Проблемы

  1. Выделенные фрагменты текста имеют следующую дельту:
...
{
   "attributes": {
      "0": "3"
   },
   "insert": "highlighted text"
},
...

Вместо 0 должно появиться "texthighlight", например:

...
{
   "attributes": {
      "texthighlight": "3"
   },
   "insert": "highlighted text"
},
...
  1. Если я применяю форматирование более одного раза, оно начинает накапливаться, помещая разметку внутри разметки. Например:

<span class="texthighlight"><span class="texthighlight"><span class="texthighlight"><span class="texthighlight"></span></span></span></span>

Ожидаемое поведение состоит в том, что присутствует только одна подсветка.

  1. Не могу удалить форматирование.

ВЫВОД

Несомненно, мне не хватает знаний о том, как это правильно реализовать. В других ситуациях мне удавалось создавать более простые блоты, но теперь я действительно запутался в переопределении определенных методов блотов. Например, следующий список показывает, какие методы я имею в виду и что я понимаю о каждом:

  • static formats(node): Возвращает форматы, представленные domNode. Вызывается в событиях выбора, когда индекс находится в пределах отформатированного диапазона.
  • formats(): Возвращает форматы, представленные этим пятном. Он используется для генерации Delta. Вызывается в событиях выбора, когда индекс находится в пределах отформатированного диапазона.
  • format(format , value): Применяет форматирование к этому пятну.

В показанной реализации подсветки только formats() а также create(value)звонят. Я знаю, что есть пример реализации каждого из этих методов, но я не получаю желаемого поведения. Думаю, это потому, что я не знаю, как именно их реализовать. Может ли кто-нибудь ответить мне, что они на самом деле делают, когда их вызывают и как они должны себя вести (реализовываться)?

Кто-нибудь может мне помочь, пожалуйста?:(

Источник

1 ответ

ИЗМЕНИТЬ (18 декабря 2019 г.)

Итак... После нескольких часов исследований я наконец смог сделать редактор немного более правильным. На протяжении всей этой истории я закончил тем, что создал блот, который может форматировать текст с разными стилями в зависимости от значения, переданного форматированию. Вы даже можете удалить форматирование, указав или опуская значение.

Я наконец смог получить ответ на пункт 2 и, как я думал, нашел его в модуле панели инструментов. Что касается методов форматирования и их различий, думаю, я мог бы лучше это понять. До сих пор не понимаю, почему так часто называются форматы. Думаю, я найду ответ, глядя на ядро ​​quill, но... Исходный код quill очень большой, так как он включает несколько файлов.

Я помещаю сюда более обновленную версию кода, показанного ранее. Все это прокомментировано в пользу всех, кто хочет узнать больше о том, как:

  1. Определите пользовательские блоты / форматы,
  2. Определите блоты, которые принимают значения и ведут себя по-разному в зависимости от настроенного значения.
  3. Определите настраиваемые кнопки панели инструментов, которые реагируют и отражают состояние содержимого редактора.

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

Полный пример на GitHub

ОРИГИНАЛЬНЫЙ ОТВЕТ

Вроде как-то удалось добиться желаемого результата. Поставляю здесь ответ, но пока не считаю его правильным, так как он неполный. Желаемый результат получен, но я до сих пор не могу понять, как и почему все работает. Понимание процесса становится чем-то фундаментальным, особенно если и когда в будущем потребуется изменить код. Ниже вы можете проверить код всего проекта. Чтобы проверить, просто запустите его.

Мои оставшиеся вопросы:

  1. В чем разница между formats а также static formats(domNode)? Если вы наблюдаете выполнение кода, они вызываются несколько раз, иstatic formats(domNode)вызываются дважды. Это нормально? Не знаю, поэтому и спрашиваю.
  2. Внутри функции highlightSelectedText(hl), почему hl отображается с ложным значением? Как это произошло?
  3. Когда применяется форматирование, createиспользуется. Когда его снимают,format(format, value)называется. Есть фрагменты кода (внутри формата), которые никогда не достигаются. Не следует применять и удалять форматыformat-только работа? Почему мне нужно менять элемент DOM в двух разных местах?

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

Источник
Другие вопросы по тегам