Tinymce 編輯器默認的 插入代碼插件叫 "codesample"，語法高高基于 prism，僅對 prism 封裝了幾種語言，不宜擴展，前端支持語言包自定義，語言包多的的話文件也相當大。研究相關語法高高插件之后，最終決定改造成? highlight.js （https://highlightjs.org/）版本

highlight.js 宣稱近200種語言支持，可自動識別，只有一個100k多一點的庫文件

因為主要用在BE雙驅(qū)框架中，插件直接命名為 "becodesample" （be + codesample），方便區(qū)分和識別，becodesample 主要實現(xiàn)與 codesample 基本一致，編輯器中插入代碼時，使用 hightlight.js 提供的方法 highlightElement 生成高亮，代碼塊插入后編輯器內(nèi)即時高亮，整塊鎖定，可雙擊彈出編輯界面，最終編輯器器效果如圖：

支持的語言比較多，并可自動識別（選擇語言：Auto）

演示網(wǎng)址：

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 引入的這個樣式作用于編輯器內(nèi)代碼高亮，因為經(jīng)典模式時編輯器是個 iframe,，高亮樣式 一定要通過 content_css 引入，如果使用了 inline 模式，也可以當前頁面中引入即可。另外 tinymce 對 prism 本身高度集成，某些樣式集成在主題中，對 pre, code 的附加樣式時需要加 !important 才能生效

本文原始地址：https://www.liu12.com/article/tinymce-highlight-js-plugin，轉(zhuǎn)載請保留出處