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

作者: 刘一二 发布时间: 2022年7月15日 浏览: 1203
Tinymce 编辑器默认的 插入代码插件叫 "codesample",语法高高基于 prism,仅对 prism 封装了几种语言,不宜扩展,前端支持语言包自定义,语言包多的的话文件也相当大。研究相关语法高高插件之后,最终决定改造成  highlight.js (https://highlightjs.org/)版本
 
highlight.js 宣称近200种语言支持,可自动识别,只有一个100k多一点的库文件
 
因为主要用在 BE双驱框架 中,插件直接命名为 "becodesample" (be + codesample),方便区分和识别,becodesample 主要实现与 codesample 基本一致,编辑器中插入代码时,使用 hightlight.js 提供的方法 highlightElement 生成高亮,代码块插入后编辑器内即时高亮,整块锁定,可双击弹出编辑界面,最终编辑器器效果如图:

editor-demo.jpg


支持的语言比较多,并可自动识别(选择语言:Auto)

languages.jpg


演示网址:

 

源码地址:

 

如何使用 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 才能生效
 
最新文章
热门文章
导航