0

我在全新的 Connections 6.5.1 安装之上安装了TinyMCE 编辑器。虽然使用codesample 插件的语法突出显示是开箱即用的，但它仅适用于某些语言。我找到了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.

所以我从一个 CDN 加载了缺少的插件，例如批处理插件。将其包含在内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并重新打包了这些 folter：

[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 不显示语法高亮？

4

1 回答 1

0

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

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

工作重点

也在编辑器中突出显示

我发现它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

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

在此处输入图像描述

于 2020-06-16T08:48:46.800 回答