Повторное использование существующего диапазона с пользовательскими атрибутами в CKEditor при изменении цвета фона

Question

При изменении цвета фона CKEditor оборачивает выделенный контент в span элемент, в котором установлен встроенный стиль.

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

Один из плагинов используется для создания span элементы с пользовательским атрибутом data-player-control:

span[data-player-control] {
    background-color: #3366FF;
    color: #FFF;
    border-radius: 10px;
    padding: 10px;
}

<span data-player-control="play">My element</span>

Значение data-player-control Атрибут не является фиксированным (его можно указать в плагине), и он используется для управления выставкой видео.

Когда редактор используется для изменения цвета фона элемента, он оборачивает текст элемента в новый span что приводит к:

span[data-player-control] {
    background-color: #3366FF;
    color: #FFF;
    border-radius: 10px;
    padding: 10px;
}

<span data-player-control="play">
  <span style="background-color:#FF0000">My element</span>
</span>

Эти два вложенных span элементы с двумя различными цветами фона нежелательны.

Что мне нужно, так это встроенный стиль для применения к существующим span элемент, в результате чего:

span[data-player-control] {
    background-color: #3366FF;
    color: #FFF;
    border-radius: 10px;
    padding: 10px;
}

<span data-player-control="play" style="background-color:#FF0000">
  My element
</span>

Как этого достичь?

Использование dataFilter или htmlFilter не является возможным решением, так как они выполняются во входных или выходных данных при вводе или существовании встроенного экземпляра CKEditor. Использование преобразования также не является решением, так как оно использует упрощенную форму для представления элементов, а не реальный DOM.

Есть ли какая-либо функция обратного вызова, используемая при редактировании содержимого (чтобы я мог изменить DOM в соответствии со своими потребностями)?

Answer 1

Простое решение состоит в том, чтобы слушать change событие в экземпляре редактора, а затем изменить DOM в event.editor.ui.contentsElement.$ по желанию.

Answer 2

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

Чтобы переопределить элемент span с некоторыми пользовательскими атрибутами, вы можете использовать:

config.colorButton_backStyle = {
    element: 'span',        
    styles: { 'background-color': '#(color)' },
    overrides: { 'element': 'span', attributes: { 'data-player-control': 'play' } }
};

Таким образом, в основном атрибут overrides используется при применении background-color, и существует такой интервал с таким атрибутом - он заменяется (но затем атрибут также удаляется). Вы можете добавить атрибуты:

config.colorButton_backStyle = {
    element: 'span',
    attributes: { 'data-player-control': 'play' },
    styles: { 'background-color': '#(color)' },
    overrides: { 'element': 'span', attributes: { 'data-player-control': 'play' } }
};

Так что этот основной диапазон также имеет свой атрибут. Проблема с этим решением заключается в том, что:

1. При применении цвета фона к другим элементам, span также будет иметь data-player-control приписывать.
2. При удалении цвета фона удаляется весь диапазон.

---

Вышеуказанное решение может не соответствовать вашим потребностям. Может быть, есть другой подход к проблеме, которую вы пытаетесь решить?

Как я понимаю из вопроса, вы хотели бы, чтобы HTML все время определял структуру (не только как выходные данные), это правильно? Какую проблему вызывает структура с вложенными интервалами в вашем приложении / реализации?