在 HCL Connections 6.5 CR1 TinyMCE 中向 PrismJS 添加额外的语法高亮插件答案

【问题标题】：Add additional syntax highlighter plugin to PrismJS in HCL Connections 6.5 CR1 TinyMCE在 HCL Connections 6.5 CR1 TinyMCE 中向 PrismJS 添加额外的语法高亮插件
【发布时间】：2020-06-16 06:57:41
【问题描述】：

我在全新的 Connections 6.5.1 安装之上安装了 TinyMCE editor。虽然使用codesample plugin 的语法突出显示是开箱即用的，但它仅适用于某些语言。我找到了codesample_languages，它们是overriden like described in this article。

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。

所以我从一个 CDN 加载了缺少的插件，例如batch plugin。将其包含在 header.jsp 中不起作用，因为 Prism 命名空间未初始化。在footer.jsp 中似乎没有任何效果，假设 PrismJS 已经初始化。

自定义网络资源存档

PrismJS 似乎是从https://cnx65.internal/connections/resources/web/tiny.editors.connections/render/prism.js 获取的，所以我在/opt/IBM/shared/provision/webresources 中提取了tiny.editors.connections_4.2.1.1.jar，修改了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 不显示语法高亮呢？

【问题讨论】：

标签： tinymce ibm-connections prismjs hcl-connections

【解决方案1】：

PrismJS 不是问题：连接改变了他们使用 PrismJS 的方式。过去，它们只是附加类，因此我们需要在渲染页面中包含 prisms css/js 文件（例如 header/footer.jsp）。但似乎从 6.5.1 (CR1) 开始，TinyMCE 编辑器在更改代码块时调用 PrismJS。按下 save 后，编辑器将整个解析后的带有内联 css 的突出显示的 HTML 放入其 HTML 中。

因此，在读取模式下重新加载呈现的页面是不够的，因为它是在添加 lightlight 插件之前呈现的。当我们单击 edit 并在代码块中双击时，突出显示起作用。然后在代码模式和 wiki 页面中单击 save。现在可以了：

也在编辑器中突出显示

我发现resources/render/prism.js 负责只读视图，而不是编辑器本身。如果我们只在那里添加插件，我们不会在编辑视图中突出显示

要解决这个问题，我们需要在 TinyMCE 存档中编辑 resources/tinymce/tinymce-bundle.min.js。在插件部分添加插件 JS 代码。例如，在Prism.languages.csharp=... 之前。现在将修改后的文件添加到存档中

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

并重新启动 common + 您正在使用的应用程序（例如 Wikis）。现在突出显示在只读视图和编辑器中都有效：

【讨论】：