CKEditor 4.x 代码高亮插件SyntaxHighlighter和Code Snippet安装以及调用方法
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;"> <!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html></pre>
Code Snippet 如下:
<pre> <code class="language-html"><!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html></code></pre>
到这里,两款代码高亮插件就安装完成了,接下来就跟使用普通CKEditor编辑器一样,把编辑器文件放入你的项目中!
以上用到的插件可以在下方点击下载!
(资源库 www.zyku.net)
栏 目:工具资源
本文标题:CKEditor 4.x 代码高亮插件SyntaxHighlighter和Code Snippet安装以及调用方法
本文地址:https://www.zyku.net/gongju/1570.html
您可能感兴趣的文章
- 06-26CKEditor 4 编辑器添加code标签按钮的方法
- 06-26highlightjs网页代码高亮插件调用方法
- 06-24SyntaxHighlighter 隐藏Y轴滚动条
- 06-24SyntaxHighlighter网页代码高亮插件build构造方法
- 05-14CKEditor 5 编辑器设置语言高度以及项目中调用方法
- 05-13CKEditor 5 在线生成工具online-builder使用方法
- 05-13CKEditor 5 npm方式安装调用与配置教程
- 01-12CKEditor常用配置属性整理
- 01-10代码高亮插件codesnippet添加行号的方法
- 12-20CKEditor编辑器上传图片禁止自动设置宽高的方法
- 09-27苹果手机怎么设置屏幕镜像
- 12-10小米air2se如何重新连接手机
- 09-26苏周到实名认证教程分享
- 12-23HTML <area> 标签
- 02-11python 利用PyAutoGUI快速构建自动化
- 09-04荣耀x20调节音量方法汇总
- 02-18Html5 Geolocation获取地理位置信息实
- 01-12蔚蓝书签-蔚蓝书签应用软件功能介绍
- 03-31红米k40定时开关机开启教程
- 09-22腾讯会议更换个人专属888会议号教程
最近更新
阅读排行
猜你喜欢
- 03-02airpods配对第二个手机方法
- 02-21MySQL安全模式下重置root密码的方法
- 01-11快速清理手机垃圾-快速清理手机垃圾应
- 02-11pytorch 如何实现HWC转CHW
- 04-10一加9pro闪回键开启方法
- 09-28国庆出行防疫要求查询方法介绍
- 01-14乐凯咨询-乐凯咨询应用软件功能介绍
- 02-28帝国CMS两种方法实现点击更换验证码的
- 07-31帝国cms栏目列表页调用内容页一篇文章
- 10-19iPhone13车道级导航在哪开启