Добавьте дополнительный плагин подсветки синтаксиса в PrismJS в HCL Connections 6.5 CR1 TinyMCE

Question

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

externalPlugins: [{
      name: "codesample",
      url: "/connections/resources/web/tiny.editors.connections/tinymce/plugins/codesample/plugin.min.js",
      settings: {
        codesample_global_prismjs: true,
        codesample_languages: [
          { text: 'ASP.NET (Core)', value: 'aspnet' },
          { text: 'Apache', value: 'apacheconf' },
          { text: 'Bash', value: 'bash' },
          { text: 'C#', value: 'csharp' },
          { text: 'C++', value: 'cpp' },
          { text: 'CSS', value: 'css' }
        ]
      }
    }
]

Теперь их можно выбрать в редакторе. Но они не работают, потому что встроенный PrismJS из редактора поддерживает толькоextend, insertBefore, DFS, markup, xml, html, mathml, svg, css, clike, javascript, js, c, csharp, cs, dotnet, cpp, java, markup-templating, php, python, py, ruby, rb.

Итак, я загрузил недостающие плагины с компакт-диска, например, пакетный плагин. Включая его вheader.jsp не работает, потому что Prismпространство имен не инициализировано. вfooter.jsp похоже, что это не имеет никакого эффекта, если предположить, что PrismJS уже инициализирован.

Настройка архива веб-ресурсов

PrismJS, похоже, получен из https://cnx65.internal/connections/resources/web/tiny.editors.connections/render/prism.js поэтому я извлек tiny.editors.connections_4.2.1.1.jar в /opt/IBM/shared/provision/webresources, модифицированный resources/render/prism.js и перепаковали те фолтеры:

[centos@cnx65 webresources]$ zip -r tiny.editors.connections_4.2.1.1.jar resources/render/

После перезапуска Common и Wiki (приложения, в котором я тестирую TinyMCE) подсветка синтаксиса для Bash по-прежнему отсутствует. Хотя когда я перехожу кhttps://cnx65.internal/connections/resources/web/tiny.editors.connections/render/prism.js, Я вижу вставленный мной код плагина Bash. Чтобы узнать, какие языки доступны, я добавляю

console.log(Object.keys(Prism.languages))

в конце файла. Это дало мне массив, содержащийbash. Итак, плагин доступен, но почему TinyMCE не показывает подсветку синтаксиса?

Answer 1

Проблема не в PrismJS: Connections изменили способ использования PrismJS. Раньше они просто добавляли класс, поэтому нам нужно было включить файлы призм css/js в отображаемую страницу (например, header/footer.jsp). Но похоже, что начиная с 6.5.1 (CR1) редактор TinyMCE вызывает PrismJS при изменении блока кода. После нажатия кнопки " Сохранить" редактор помещает весь проанализированный выделенный HTML со встроенным CSS в свой HTML.

Как следствие, недостаточно перезагрузить отрисованную страницу в режиме чтения, потому что она была отрисована до того, как был добавлен плагин подсветки. Подсветка работает, когда мы нажимаем на редактирование и делаем двойной щелчок в блоке кода. Затем нажмите " Сохранить" в модальном окне кода, а также на вики-странице. Теперь работает:

Выделите тоже в редакторе

я узнал что resources/render/prism.jsотвечает за просмотр только для чтения, но не за сам редактор. Если мы добавим туда только плагин, мы не получим выделения в режиме редактирования.

Чтобы исправить это, нам нужно отредактировать resources/tinymce/tinymce-bundle.min.jsвнутри архива TinyMCE. Добавьте JS-код плагина в раздел плагинов. Например, раньшеPrism.languages.csharp=.... Теперь добавляем измененный файл в архив

[centos@cnx65 webresources]$ sudo zip -r tiny.editors.connections_4.2.1.1.jar resources/tinymce/tinymce-bundle.min.js

и перезапустите обычное + приложение, которое вы используете (например, Вики). Теперь выделение работает как в режиме просмотра только для чтения, так и внутри редактора: