标签：插件 Tinymce tinymce js 编辑器 highlight becodesample

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 转载请保留出处  

标签：插件,Tinymce,tinymce,js,编辑器,highlight,becodesample
来源： https://www.cnblogs.com/liu12-com/p/16486807.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。