Поделиться панелью инструментов Quill между несколькими редакторами

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

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

// this uses jQuery
$editorTag.click(function(e){
    var tag = e.target;
    var editor = getEditorByTag(tag);
    if( editor )
        editor.addModule('toolbar',{container:'#toolbar'});
});

Кажется, это работает, но я подозреваю, что Quill не любит многократно добавлять один и тот же модуль к одному и тому же объекту, поскольку в конечном итоге он плюется:

(узел) предупреждение: обнаружена возможная утечка памяти EventEmitter. Добавлено 11 слушателей. Используйте emitter.setMaxListeners (), чтобы увеличить лимит. quill.js (строка 4727)

Так есть ли способ удалить ранее добавленный модуль? Что-то типа:

// installs editor
var editor = new Quill('#editor');
// adds toolbar module
editor.addModule('toolbar',{container:'#toolbar'});
// removes just added toolbar module
editor.removeModule('toolbar');

javascript toolbar rich-text-editor quill
person TechNyquist    schedule 30.10.2015    source источник
comment
Хорошо, вызов addModule () несколько раз на одной и той же панели инструментов полностью портит события: по мере установки нескольких событий они применяются несколько раз, поэтому Quill начинает цикл, альтернативно применяя команду форматирования панели инструментов к выбранному фрагменту. Совершенно нужен способ снять панель инструментов с охраны по желанию!   -  person TechNyquist    schedule 03.11.2015
comment
Вы когда-нибудь находили решение этой проблемы?   -  person Dan    schedule 28.11.2015
comment
@ Дэн Все еще нет. Сейчас я применяю обходной путь: я использую редакторы по одному, а при создании нового я уничтожаю старый с помощью недокументированного метода уничтожения объекта Quill, чтобы все отсоединить. О, я также воссоздаю HTML-код панели инструментов с помощью jQuery, но по другим причинам (что-то о стилях и присоединении функций). Во всяком случае, метода снятия с охраны по-прежнему нет. Я просто надеюсь, что разработчики Quill не сдадутся, ведь этот проект просто потрясающий.   -  person TechNyquist    schedule 01.12.2015

Ответы (2)


arrow_upward
2
arrow_downward

На днях я столкнулся с той же проблемой и нашел решение, которое подходит для нашего случая использования. Это в основном то, что я сделал:

Я создаю один экземпляр Quill, используя настраиваемую панель инструментов, расположенную вверху. Элемент редактора помещается во временный скрытый контейнер. Когда пользователь дважды щелкает любой из трех текстовых контейнеров (Editables), элемент редактора будет перенесен из временного контейнера в новое место внутри Editable. Если пользователь нажимает клавишу выхода, Editable будет деактивирован, и элемент редактора будет перемещен обратно во временный контейнер.

Вы можете протестировать его здесь: https://codesandbox.io/s/hungry-pine-o8oh9?file=/src/App.js

Репозиторий GitHub: https://github.com/maxfahl/Quill-Edit-Multiple

Не стесняйтесь использовать код, как хотите.

person Max Fahl    schedule 08.10.2020

arrow_upward
0
arrow_downward

Решение, которое хранит историю ваших Quills, - это расширить панель инструментов и зарегистрировать в ней модуль

    class ToolbarAlt extends Toolbar {
      resetToolbar () {
        this.container.childNodes.forEach(el => {
          const clone = el.cloneNode(true);
          el.parentNode.replaceChild(clone, el);
        });
        this.container.childNodes.forEach((input) => {
          this.attach(input);
        }, this);
      }
   }
   Quill.register('modules/toolbar', ToolbarAlt, true);

Затем вызовите свою панель инструментов с помощью quill.getModule ('панель инструментов'), когда вы перейдете в один редактор.

person Jean Grimbert    schedule 21.01.2021