Tinymce 5 插入代码 插件 highlight.js 版

Tinymce 编辑器默认的 插入代码插件叫 "codesample"，语法高高基于 prism，仅对 prism 封装了几种语言，不宜扩展，前端支持语言包自定义，语言包多的的话文件也相当大。研究相关语法高高插件之后，最终决定改造成  highlight.js （https://highlightjs.org/）版本

 

highlight.js 宣称近200种语言支持，可自动识别，只有一个100k多一点的库文件

 

因为主要用在 BE双驱框架 中，插件直接命名为 "becodesample" （be + codesample），方便区分和识别，becodesample 主要实现与 codesample 基本一致，编辑器中插入代码时，使用 hightlight.js 提供的方法 highlightElement 生成高亮，代码块插入后编辑器内即时高亮，整块锁定，可双击弹出编辑界面，最终编辑器器效果如图：

支持的语言比较多，并可自动识别（选择语言：Auto）

演示网址：

​​https://tinymce-highlight-js-plugin.demo.phpbe.com​​

 

源码地址：

​​https://github.com/phpbe/tinymce-highlight.js-plugin​​

​​https://gitee.com/phpbe/tinymce-highlight.js-plugin​​

 

如何使用 becodesample：

准备工作：

1. 下载  tinymce 基本程序

2. 从 github下载完整的 src/becodesample，存入 tinymce 的 plugins 目录下

 

编写程序：

 

1. 引入 tinymce 库文件

<script src="tinymce.min.js"></script>

2. 引入 highlight js 库文件

<script src="plugins/becodesample/highlight.js-11.5.1/highlight.min.js"></script>

3. 初始化编辑器，引入代码高亮插件："becodesample"

<script>
    tinymce.init({
        selector: '#demo',
        plugins : 'becodesample code',
        toolbar: "becodesample code",
        content_css: "plugins/becodesample/highlight.js-11.5.1/styles/atom-one-light.css",
        height: '600'
    });
</script>

 

content_css 引入的这个样式作用于编辑器内代码高亮，因为经典模式时编辑器是个 iframe,，高亮样式 一定要通过 content_css 引入，如果使用了 inline 模式，也可以当前页面中引入即可。另外 tinymce 对 prism 本身高度集成，某些样式集成在主题中，对 pre, code 的附加样式时需要加 !important 才能生效

 

本文原始地址：​​https://www.liu12.com/article/tinymce-highlight-js-plugin​​，转载请保留出处