CKEditor: Distin guish между исходным видом и сохранением - PullRequest
Новая
       45

CKEditor: Distin guish между исходным видом и сохранением

0 голосов
/ 06 февраля 2020

Я использую CKEditor 4 в TYPO3 CMS. Он включает в себя плагин softhyphen , который позволяет добавлять символ дефиса Unicode с помощью кнопки.

Исходная проблема:

Поскольку мягкий дефис является полностью невидимым символом Unicode ( \u00AD), редакторам трудно с ними работать.

Ожидаемые результаты:

  1. Показать невидимый мягкий дефис в режиме исходного кода, заменив его сущностью ­.
  2. Не сохраняйте сущность ­ или другие сущности HTML в базе данных.

Предполагаемые решения:

  • Мне нужен способ различать guish между сохранением содержимого и переключением в исходный режим при использовании htmlFilter и dataFilter.
  • Или в качестве альтернативы - способ замены всех мягких дефисов на ­ сущности при инициализации редактора, сохраняя их при переключении режимов редактора, но в конечном итоге сохраняя символ Unicode в базе данных.

Подходы:

  • Я знаю, что сущностей плагин wou Я бы просто избежал мягкого дефиса, а также других символов. Но это также сохранит эти объекты в базе данных, что нежелательно.
  • Я также понимаю, что dataProcessor.htmlFilter обрабатывает исходящие данные, что включает в себя как , так и просмотр режима источника.

Следующий код заменит невидимый символ Unicode на сущность ­, если вызывается режим источника (htmlFilter.addRules()). И он изменит его, если вызывается режим WYSIWYG (dataFilter.addRules()).

К сожалению, htmlFilter также будет использоваться при сохранении, что снова сохранит сущность ­ в базе данных. 

afterInit: function (editor) {
  let dataProcessor = editor.dataProcessor,
    htmlFilter = dataProcessor && dataProcessor.htmlFilter,
    dataFilter = dataProcessor && dataProcessor.dataFilter;

  if (htmlFilter) {
    htmlFilter.addRules({
      text: function (text) {
        console.log('replacing to HTML entities');
        return text.replace(new RegExp('­', 'g'), '\u00AD').replace(new RegExp('\u00AD', 'g'), '­');
      }
    }, {
      applyToAll: true,
      excludeNestedEditable: false
    });
  }

  if (dataFilter) {
    dataFilter.addRules({
      text: function (text) {
        console.log('replacing to invisible character');
        return text.replace(new RegExp('\u00AD', 'g'), '­').replace(new RegExp('­', 'g'), '\u00AD');
      }
    }, {
      applyToAll: true,
      excludeNestedEditable: false
    });
  }
}

Я попытался обернуть htmlFilter.addRules() в условие для режима редактора. Но, похоже, что после добавления новых правил они будут применяться всегда. 

editor.on('mode', function () {
    if (this.mode === 'source') {
        // htmlFilter.addRules()
    }
}

Я также нашел два способа проверить событие save , но… 

if (editor.fire('save')) {
    // This is fired on initial editor load, but not when saving (at least in TYPO3 CMS).
}

editor.on('save', function () {
  // This is never called.
});

Есть ли решение, которое дает мне желаемое поведение?

...