ckeditor语法高亮代码高亮插件配置共享

时间：2021-09-09 来源：互联网编辑：宝哥软件园浏览：次

最近因为要做网站代码库，自己写了一个在线文字编辑器，现在对我来说真的不现实，呵呵！另外，现在有一个非常好的在线文本编辑器(ckeditor)，我将不得不再次努力！有现成的，就拿去用吧！正所谓取之主义！然而，这个在线文本编辑器对我们的程序员来说有一个缺陷。没有代码高亮功能！这样粘贴代码不好看！今晚，我总是把他弄出来。当然也是别人的肩膀做的。感谢他们的分享！不要多说话！让我们言归正传吧！

首先，去官网下载一个ckeditor

其次，去官网下载一个syntaxhighlighter，这是一个代码高亮插件。

另外，请将语法高亮器/shbrush . js文件放在我下载的演示中。

下载后，提取它们并添加到项目中，如下所示：

然后在ckeditor下创建一个名为：insertcode的新文件夹，然后在“insertcode”目录下创建一个新的“plugin.js”，并输入以下代码：

ckeditor . plugins . add(' insert code '，{ requires 3360[' dialog ']，init:函数(a){ var b=a . addcommand(' insert code '，new ckeditor . dialogcommand(' insert code ')))；a.ui.addButton('insertcode '，{ label : a . lang . insert code . toolbar，command: 'insertcode '，icon : this . path ' images/code . jpg ' })；ckeditor . dialog . add(' insert code '，this . path ' dialogs/insert code . js ')；}});目录结构如下：图2

然后新建一个images文件夹，放一张‘code . jpg’的图片，如上图所示。当然，你可以从谷歌上找到一个，16*16的尺寸就可以了。

然后创建一个新的对话框文件夹，创建一个新的“insertcode.js”，并输入以下代码：

ckeditor . dialog . add(' insert code '，function(editor){ var escape=function(value){返回值；};返回{ title: '插入代码对话框'，resizable: CKEDITOR。DIALOG_RESIZE_BOTH，minWidth: 720，minHeight: 480，contents: [{ id: 'cb '，name: 'cb '，label: 'cb '，title: 'cb '，element s 3360[{ type : ' select '，label: 'Language '，id: 'lang '，required: true '，default ' : ' csharp '，items:height:420px '，label: 'Code '，id: 'code '，rows: 31，' default': '' }] }])，onok : function(){ Code=this . getvalue of(' CB '，' Code ')；lang=this.getValueOf('cb '，' lang ')；html=' '转义符(代码)' '；editor . insert HTMl(' pre class=\ ' brush : ' lang '；\ ' ' html '/pre ')；}，onLoad:函数(){ } }；});接下来，我们将突出显示的插件插入ckeditor，并在ckeditor文件夹下找到‘cke ditor . js’。按ctrl+F查找“关于”，找到“整页：假，高度：200，插件3360‘关于，基本样式’”。我们在' about '后面加上'，insertcode '，变成' plugins 3360' about，insert code，basic styles '。

如图所示：

继续查找关于，找到j.add('about '，{ init : function(l){ var m=l . add command(' about '，new a . dialog command(' about '))；m.modes={所见即所得：1，来源：1 }；m . canundo=fall . ui . addbutton(' About '，{label:l.lang.about.title，command : ' About ' })；a.dialog.add('about '，这个。“路径”对话框/关于。js’)；}});',我们在这个分号后面增加j.add('insertcode '，{需要3360[' dialog ']，init :函数(l){ l . addcommand(' insert code '，new a . dialog command(' insert code ')))；l.ui.addButton('insertcode '，{ label : l . lang。插入代码。工具栏，command: '插入代码'，图标：这个。“路径”图像/代码。jpg ' })；a.dialog.add('insertcode '，这个。“路径”对话框/插入代码。js’)；}});

如下图：

接下来继续在ckeditor.js查找i.toolbar_Basic='，这就是CKEditor默认的工具栏了，我们在这里加上，插入代码，比如我的['最大化','显示块','-','插入代码']'

我添加在如下图选中的文本那个地方：

最后一步：进入ckeditor\lang '，请注意是分别在' en.js '，' zh.js '，' zh-cn.js '中增加，插入代码： '插入代码'',',插入代码： '插入代碼，'，insertcode: '插入代码'',一定要按这个顺序加哦。

如下图是en.js中的，zh-cn.js，zh.js我就不一一截图了。

最后在页面上添加如下引用：

head runat=' server ' title/title link type=' text/CSS ' rel='样式表href=' syntaxhighlight _ 3。0 .83/style/shcore。CSS '/链接类型=' text/CSS ' rel='样式表href=' syntaxhighlight _ 3。0 .83/style/shtheme default。CSS '/脚本类型=' text/JavaScript ' src=' http 3360 synctaxhighlight _ 3。0 .83/脚本/shcore ./脚本/标题页面的代码如下：

表单ID=' form 1 ' runat=' server ' div ASP :文本框ID=' txt content ' runat=' server '文本模式=' MultiLine ' Height=' 310 px ' Width=' 100% '/ASP 3360文本框脚本类型=' text/JavaScript ' ckeditor。替换(%)=txt内容.ClientID % '，皮肤： ' office 2003 ' })；/script/script-% asp3360 Button runat=' server ' Text=' Button ' OnClick=' unname 1 _ Click '/div asp3360 iteral ID=' literal 1 ' runat=' server '/asp: iteral/form后台代码：

复制代码代码如下：受保护的void Unnamed1_Click(对象发送者，事件参数{这个.字面上1。Text=txtcontent .文字；}

还有就是在页面的@ Page指令中加入ValidateRequest='false '，加入后的@Page指令如下：

复制代码代码如下：%@页面语言=' c# ' AutoEventWireup=' true ' CodeFile=' Default。aspx。cs ' Inherits=' _ Default ' ValidateRequest=' false ' %

否则会报错的。

效果图：