手机版

CKEditor 4.4.1添加代码高亮插件功能教程【使用官方推荐的代码片段插件】

时间:2021-08-22 来源:互联网 编辑:宝哥软件园 浏览:

本文说明了在CKEditor 4.4.1中添加代码高亮插件的功能。分享给大家参考,如下:

随着CKEditor4.4.1的发布,之前一直困扰的代码高亮问题终于得到了完美的解决。在CKEditor4.4中,Code Snippet的插件正式发布,最终代码高亮可以完美使用。之前用的是网友开发的代码高亮插件。让我们介绍如何使用代码片段来突出显示插件。本文还介绍了如何在CKEditor中安装代码片段插件。

新版本的附加信息

CKEditor 4.4更新详情:代码亮点插件的http://ckeditor.com/whatsnew CKEditor官方文档代码片段:https://docs.ckeditor.com/#!/guide/dev _ Code Snippet代码片段下载地址:http://ckeditor.com/addon/codesnippet代码片段简介

Code Snippet是CKEditor4.4.1的新插件,主要提供添加代码片段并高亮显示的功能。另外需要注意的是,Code Snippet只是作为CKEditor的插件使用,代码的亮点是highlight.js,突出了js库。

代码片段仅使用highlight.js作为默认的高亮库。由于highlight.js已经集成到Code Snippet中,所以在使用CKEditor时,我们不需要参考highlight.js库。(点击此处查看highlight.js官网)。

以前版本的CKEditor没有好的代码高亮插件,所以都是自定义插件。当时使用的是SyntaxHighlighter。您也可以在线搜索语法高亮器的信息

如何安装代码片段?添加代码片段以突出显示插件的具体步骤

添加代码片段的方法非常简单。但是由于版本兼容性问题,目前官网这个插件最好兼容4.4,其他兼容性还没有测试。因此,在使用这个插件时,最好将CKEditor升级到4.4.1。

如果你已经熟悉ckeditor的插件机制,那么我们只需要在官网下载Code Snippet(下载地址见文章顶部),将里面的整个文件夹解压到CKEditor文件夹下的plugins文件夹即可。

codesnippet解压到plugins文件夹内

然后设置ckeditor的config.js配置文件,添加插件。代码如下(这里只设置一个插件属性,其他属性可以根据需要设置):

ckeditor . editor config=function(config){//添加插件,多个插件之间用逗号隔开。config . extra plugins=' code snippet ';//使用zenburn的代码高亮样式PS:zenburn的效果是黑色背景。//如果没有设置默认样式,则为DefaultConfig。CodeSnippet _ Theme=' Zenburn}您还可以使用以下代码在编辑器初始化中添加高亮显示插件:

CKEDITOR.replace('文本框ID ',{extra plugins : '代码片段',code snippet _ theme : ' Zen burn ' });这里需要注意的一点是,如果您按照上面的步骤添加插件,将会出现以下两个错误:

在“http://localhost :16577/Scripts/ckeditor/plugins/widget/plugin . js”中找不到资源名称“widget”?t=[CKEDITOR . Resource manager . load]在“http://localhost :16577/Scripts/CKEditor/Plug”处找不到资源名称“lineutils”这是因为下载的CKEditor缺少小部件和lineutils插件。要在官网下载这两个插件,只需将它们解压到ckeditor文件夹下的plugins文件夹中即可。一般第一个widget插件找不到的错误会先出现,第二个lineutils插件找不到的错误会在添加widget插件后出现。因此,代码片段需要依赖这两个插件。这两个插件的下载地址如下:

http://ckeditor.com/addon/widgethttp://ckeditor.com/addon/lineutils也有最简单的方法。首先,打开代码片段下载地址,并将插件添加到自定义CKEditor编辑器中

然后进入自定义CKEditor编辑器页面,可以看到代码高亮插件已经集成到CKEditor中,最后点击下载。当然,还有很多定制的UIS和插件,所以你可以选择你需要的插件和你喜欢的编辑器界面。

这样,就完美地添加了代码片段高亮插件。

如何让代码片段在普通页面上突出显示?

我们会发现,虽然编辑器中添加的代码片段有高亮效果,但是将编辑器中的代码片段放在页面上没有高亮效果。这是因为编辑器插件默认集成了代码的高亮库,所以我们必须重新引用并添加highlight.js库来显示页面上的高亮。

让我们首先看看编辑器中突出显示的代码:

precode class='language-html '!doctype html lang=' en ' xmlns=' http://www.w3.org/1999/XHTML' head metacarset=' utf-8 '/title测试页/title/head odyiv代码片段高亮效果/div/body/html/code/Pre可以看到高亮效果主要是根据Pre标签和code class='language-HTML '标签显示的,其中language-HTML所表达的高亮语言为HTML。Highlight.js根据这两个标签显示高亮效果。

我们首先需要下载highlight.js(下载地址,可以选择要高亮显示的编程语言的种类),然后在需要高亮显示代码的页面中添加以下代码:

!-最开始这里的样式是默认样式,可以根据自己的喜好改变样式-!-我的高光效果是zenburn-link rel='样式表' href=' styles/default . CSS ' rel=' externalnofollow '脚本src=' http : highlight . pack . js '/scriptscripthljs . inithighlingload();/script要注意改变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数学运算用法总结》、0103010。

希望本文对JavaScript编程有所帮助。

版权声明:CKEditor 4.4.1添加代码高亮插件功能教程【使用官方推荐的代码片段插件】是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。