::CKEDITOR 5 :: Несколько экземпляров для статических и динамически создаваемых элементов div и один редактор ⇐ Jquery

[Anonymous]

Я использую CKEDITOR 5 Superbuild.

Имея таблицу с несколькими tds с именем класса в виде .text и внутри каждого td, я установил div[contenteditable] как true.

Я пытаюсь использовать несколько редакторов на одной странице с одним и тем же классом/атрибутом, и мне всегда нужно показывать только один редактор.

jsFiddle

Проблема: Получение нескольких редакторов при каждом нажатии любого div.



Желаемые результаты:
[*]При щелчке по любому редактируемому элементу div должен отображаться редактор с заданной опцией. [*]Например: если я нажму на первый элемент div, он должен отобразить свойства этого конкретного элемента div, а при нажатии на второй элемент div отобразятся только его свойства. Это означает, что мне нужно показывать только один экземпляр в любое время. [*]Если я создаю динамически новый элемент div, нажав кнопку + Добавить новый, он также должен быть таким же.




$('#ck-fixed-toolbar').hide(); $(document).on("click", "table td.text div[contenteditable]", function (e) { CKEDITOR.ClassicEditor.create(document.querySelector('table td.text div[contenteditable]'), { панель инструментов: { предметы: [ «fontFamily», «fontSize», «fontColor», «fontBackgroundColor», «жирный», «курсив», «подчеркивание», «зачеркивание», ], mustNotGroupWhenFull: правда }, заполнитель: '', RemovePlugins: ['CKBox', 'CKFinder', 'EasyImage', 'RealTimeCollaborativeComments', 'RealTimeCollaborativeTrackChanges', 'RealTimeCollaborativeRevisionHistory', 'PresenceList', 'Comments', 'TrackChanges', 'TrackChangesData', 'RevisionHistory', 'Pagination' , 'WProofreader', 'MathType', 'SlashCommand', 'Template', 'DocumentOutline', 'FormatPainter', 'TableOfContents', 'PasteFromOfficeEnhanced'] }).then(editor => { consttoolbarContainer = document.querySelector('#ck-fixed-toolbar'); ToolbarContainer.appendChild(editor.ui.view.toolbar.element); }); }); $(document).on("click", "table td.text div[contenteditable]", function (e) { $('#ck-fixed-toolbar').show(); }); $(document).on('click', '#addNewContent', function(){ $('#ck-fixed-toolbar').hide(); $('table').append('Динамически создаваемый контент'); }) body{font-family:Verdana;font-size:13px;} #ck-fixed-toolbar{min-height:50px;} table,td{border:1px Solid #cccc;border-collapse:collapse} #addNewContent{margin-top:30px; Содержание 1 lorem ipsum dolar sit amet Содержание 2 lorem ipsum dolar sit amet + Добавить новый