欢迎来到资源库(www.zyku.net)

工具资源

当前位置:首页 > 网站运营 > 工具资源 > CKEditor

CKEditor 4.x 代码高亮插件SyntaxHighlighter和Code Snippet安装以及调用方法

时间:2017-11-30|栏目:工具资源|点击:|我要投稿

CKEditor 原名 FCKEditor 。是目前最优秀的可见即可得网页编辑器之一,它采用JavaScript编写。具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点。它非常流行,互联网上很容易找到相关技术文档,国内许多WEB项目和大型网站均采用了CKEditor。

作为一个技术型网站或者博客,如果代码没有高亮展示功能看起来一点都不爽,本文为大家带来两款代码高亮插件,重点介绍插件的安装以及调用方法,大家可以根据自己的喜好选择使用哪款插件!

安装方法:

1、快速获取带指定插件的CKEditor编辑器

首先打开CKEditor官方网站,网址:https://ckeditor.com/cke4/addons/plugins/all,找到左上方搜索框,输入“SyntaxHighlighter”进行搜索,如下图所示:

找到“Syntaxhighlighter Interface”点击左下角的“Add to my editor”按钮,如下图所示:

添加完成后,接着搜索“Code Snippet”,同样在搜索结果中找到“Code Snippet”,点击“Add to my editor”按钮,点击完成后发现按钮变了,变成了“remove”,此时,在右侧会显示已选择插件数量以及编辑器样式,如下图所示:

这里显示了我们已经选择了2款插件,随后点击“Build my editor”按钮,开始构建编辑器!

第一、二项:可以根据自己的喜好进行选择

第三项:选择一个“Chinese Simplified”,也就是简体中文

随后点击“Download”按钮,开始下载构建好的编辑器!

打开刚刚下载的编辑器文件,找到“samples”文件夹,如下图所示:

打开里面的“index.html”,如果能看到刚刚创建的编辑器,说明文件没有问题,如下图所示:

可以看到,我们构建的两个代码高亮插件也出现了,前者为:Code Snippet,后者为:SyntaxHighlighter

2、单独插件安装方法

如果是编辑器已经安装好了,后面想安装代码高亮插件,这个时候就需要单独安装了,同样进入CKEditor 官方网站,分别下载两款代码高亮插件,网址如下:

SyntaxHighlighter:https://ckeditor.com/cke4/addon/syntaxhighlight

Code Snippet:https://ckeditor.com/cke4/addon/codesnippet

另外需要安装三款依赖插件,下载地址:

https://ckeditor.com/cke4/addon/widget

https://ckeditor.com/cke4/addon/lineutils

https://ckeditor.com/cke4/addon/widgetselection

将下载的五款插件解压后放到“ckeditor/plugins”目录下,如下图所示:

然后找到 ckeditor下的“config.js”,打开,添加如下代码:

config.extraPlugins = 'codesnippet,syntaxhighlight';

完成这一步,已经安装好两款代码高亮插件了,打开编辑器看看效果,如下图所示:

我们来添加一段html代码,看看是否能正常使用:

SyntaxHighlighter 如下:

<pre class="brush:xml;">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;title&gt;&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;/body&gt;
&lt;/html&gt;</pre>

Code Snippet 如下:

<pre>
<code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;title&gt;&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>

到这里,两款代码高亮插件就安装完成了,接下来就跟使用普通CKEditor编辑器一样,把编辑器文件放入你的项目中!

以上用到的插件可以在下方点击下载!

(资源库 www.zyku.net)

资源库本地下载

关于我们 | 版权申明 | 寻求合作 |

重要申明:本站所有的文章、图片、评论等内容,均由网友发表或上传并维护或收集自网络,仅供个人学习交流使用,版权归原作者所有。

如有侵犯您的版权,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:95148658 | 邮箱:mb8#qq.com(#换成@)

苏ICP备2020066115号-1

本网站由提供CDN加速/云存储服务