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

Question

Я установил редактор TinyMCE поверх установки fre sh 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' }
        ]
      }
    }
]

Теперь их можно выбрать в редакторе. Но они не работают, потому что встроенная Prism JS из редактора поддерживает только 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 кажется, что это не действует, если предположить, что Prism JS уже инициализирован.

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

Prism JS, похоже, извлекается из 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

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

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

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

Я обнаружил, что 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

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