CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
前端  /  管理员 发布于 4年前   381
本文实例讲述了CKEditor 4.4.1 添加代码高亮显示插件功能。分享给大家供大家参考,具体如下:
随着CKEditor4.4.1的发布,以前一直困扰的代码高亮问题终于完美的得到解决,在CKEditor4.4中官方发布了Code Snippet这个代码片段的插件,终于可以完美的内嵌使用代码高亮了,以前都是使用网友自己开发的代码高亮插件。下面就来介绍如何使用Code Snippet这个代码高亮插件。本文还介绍了CKEditor中如何安装Code Snippet插件。
新版本附加信息
Code Snippet简介
Code Snippet是CKEditor4.4.1的新插件,主要提供添加代码片段高亮显示的功能。另外注意一点的是,Code Snippet只是作为CKEditor的插件,真正实现代码高亮的是highlight.js这个代码高亮JS库。
Code Snippet只是将highlight.js作为默认的高亮库,由于highlight.js已经集成在Code Snippet中,所以我们在使用CKEditor时候是不需要另外再引用highlight.js这个库。(点击这里查看highlight.js的官方网站)。
以前的CKEditor版本由于没有比较好的代码高亮插件,都是自己自定义插件,当时用的是SyntaxHighlighter这个代码高亮库。大家也可网上搜下SyntaxHighlighter的资料
如何安装Code Snippet?添加代码片段高亮插件的具体步骤
添加Code Snippet的方法很简单,不过由于版本兼容问题,目前官网上这个插件对4.4兼容最好,其他兼容则未进行测试,所以使用这个插件最好是将CKEditor升级到4.4.1。
如果已经熟悉CKEditor的插件机制,那么我们只要到官网上将Code Snippet下载下来(下载地址见文章顶部),将里面的整个文件夹解压到ckeditor文件夹下的plugins文件夹内。
然后设置下ckeditor的config.js配置文件,将插件添加进去即可,代码如下(这里只设置了一个插件属性,其他属性可根据需要设置):
CKEDITOR.editorConfig = function (config) { //添加插件,多个插件用逗号隔开 config.extraPlugins = 'codesnippet'; //使用zenburn的代码高亮风格样式 PS:zenburn效果就是黑色背景 //如果不设置着默认风格为default config.codeSnippet_theme = 'zenburn';}
也可以在编辑器初始化的使用下面代码添加高亮插件:
CKEDITOR.replace('文本框ID',{extraPlugins: 'codesnippet',codeSnippet_theme: 'zenburn'});
这里有一点需要注意,如果按照上面添加插件的步骤而出现下面这两个错误:
这是因为下载的CKEditor缺少widget和lineutils插件,到官网将这两个插件下载下来,只要将这两个插件解压到ckeditor文件夹下的plugins文件夹内就可以了。一般是先出现第一个widget插件无法找到的错误,添加了widget插件后才会出现第二个找不到lineutils插件的错误,可见Code Snippet需要依靠这两个插件。这两个插件的下载地址如下:
还有最简单的方式,首先打开Code Snippet下载地址,将插件添加到自定义CKEditor编辑器
然后进入自定义CKEditor编辑器页面,这里可以看到已经将代码高亮插件集成到CKEditor里面了,最后点击下载就可以了,当然这里有很多自定义UI和插件,可以选择自己需要的插件和喜欢的编辑器界面。
这样就完美的添加上了代码片段高亮插件了。
如何让代码片段在普通页面上显示高亮?
我们会发现,虽然在编辑器中添加的代码片段有高亮效果,但是将编辑器里的代码片段放到页面中却没有高亮的效果。这是因为编辑器的插件已经默认集成了highlight.js这个代码高亮库,所以我们要在页面上显示高亮就得重新引用和添加highlight.js库。
我们先看下编辑器中的高亮代码:
测试页面 代码片段高亮效果
可以看到 高亮的效果主要是根据
标签和 这两个标签来显示的,其中language-html表示的显示高亮语言为HTML。highlight.js就是根据这两个标签来显示高亮效果。我们首先要将highlight.js下载下来(下载地址,可以选择要高亮的编程语言种类),然后在需要代码高亮的页面添加下面的代码:
要注意更改css样式和JS的引用地址,地址以自己网站中highlight.js的存放地址为准。另外高亮库默认使用的是default.css的高亮风格,这里是highlightjs的各种代码高亮风格的显示效果,大家可以到上面测试选择自己喜欢的高亮风格:http://highlightjs.org/static/test.html。highlightjs的具体使用方法可以看官网的文档:http://highlightjs.org/usage/。
到这里就可以完整的将代码片段进行高亮显示了。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript错误与调试技巧总结》、《JavaScript操作XML文件技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
- 详解Laravel5.6 Passport实现Api接口认证
- 在Laravel5.6中使用Swoole的协程数据库查询
- 浅析Laravel5中队列的配置及使用
- Laravel5框架自定义错误页面配置操作示例
- Laravel5中Cookie的使用详解
- Laravel5中contracts详解
- Laravel5权限管理方法详解
- Laravel5中防止XSS跨站攻击的方法
- laravel5.4+vue+element简单搭建的示例代码
- CKeditor4 字体颜色功能配置方法教程
- 手把手教你 CKEDITOR 4 扩展插件制作
- Laravel5.6框架使用CKEditor5相关配置详解
123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号