知识大全 ckeditor+代码高亮

Posted 2022-07-17 知

篇首语：有的时候难过的不是结局不够好，而是真诚没有被善待。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 ckeditor+代码高亮相关的知识，希望对你有一定的参考价值。

最近由于自己想做一个网站形式的代码库自已写一个在线文本编辑器对于现在的我来确实是很不切实际呵呵！再说了现在有一个非常好的在线文本编辑器（ckeditor)了我和必再去费这等功夫呢！有现成的拿过用就是的呗！正所谓的拿来主义！不过这个在线文本编辑器对于我们程序员来说有一个算是缺陷吧！没有代码高亮的功能！这样把代码贴上去很不好看！今天晚上我总是把他给弄出来了当然也采在别人的肩膀上做成的在此感谢他们的分享！费话不多说了！咱们进入正题吧！首先去官方网站下载个ckeditor 其次去官方网站下载个syntaxhighlighter 这个是代码高亮插件下载以后把他们解压加入项目如下所示

然后在ckeditor下面新建一个文件夹命名为 insertcode 然后在 insertcode 目录下新建一个 plugin js 输入以下代码

　　CKEDITOR plugins add( insertcode requires: [ dialog ] init: function (a) var b = a addCommand( insertcode new CKEDITOR dialogCommand( insertcode )); a ui addButton( insertcode label: a lang insertcode toolbar mand: insertcode icon: this path + images/code jpg ); CKEDITOR dialog add( insertcode this path + dialogs/insertcode js ); );

　　目录结构如下图图二

　　再新建一个images文件夹放入一个 code jpg 的图片如上图所示当然图片可以从google找一个 * 大小的就好了再新建一个dialogs文件夹新建一个 insertcode js 输入如下代码 CKEDITOR dialog add( insertcode function (editor) var escape = function (value) return value; ; return title: Insert Code Dialog resizable: CKEDITOR DIALOG_RESIZE_BOTH minWidth: minHeight: contents: [ id: cb name: cb label: cb title: cb elements: [ type: select label: Language id: lang required: true default : csharp items: [[ ActionScript as ] [ Bash/shell bash ] [ C# csharp ] [ C++ cpp ] [ CSS css ] [ Delphi delphi ] [ Diff diff ] [ Groovy groovy ] [ Html x ] [ JavaScript js ] [ Java java ] [ JavaFX jfx ] [ Perl perl ] [ PHP php ] [ Plain Text plain ] [ PowerShell ps ] [ Python py ] [ Ruby rails ] [ Scala scala ] [ SQL sql ] [ Visual Basic vb ] [ XML xml ]] type: textarea style: width: px;height: px label: Code id: code rows: default : ] ] onOk: function () code = this getValueOf( cb code ); lang = this getValueOf( cb lang ); = + escape(code) + ; editor insertHtml( <pre class=\\ brush: + lang + ;\\ > + + </pre> ); onLoad: function () ;);

　　接下来我们就把高亮插件插入到ckeditor里来找到ckeditor文件夹下的 ckeditor js 按ctrl+F查找 about 找到 fullPage:false height: plugins: about basicstyles 我们在 about 后面增加 insertcode 这里就变成 plugins: about insertcode basicstyles

　　如图

　　继续查找 about 找到 j add( about init:function(l)var m=l addCommand( about new a dialogCommand( about ));m modes=wysiwyg: source: ;m canUndo=false;l ui addButton( About label:l lang about title mand: about );a dialog add( about this path+ dialogs/about js );); 我们在这个分号后面增加 j add( insertcode requires: [ dialog ] init: function(l)l addCommand( insertcode new a dialogCommand( insertcode ));l ui addButton( insertcode label: l lang insertcode toolbar mand: insertcode icon: this path + images/code jpg );a dialog add( insertcode this path + dialogs/insertcode js );); 如下图接下来继续在ckeditor js查找 i toolbar_Basic= 这就是CKEditor默认的工具栏了我们在这里加上 insertcode 比如我的 [ Maximize ShowBlocks insertcode ] 我添加在如下图选中的文本那个地方最后一步进入 ckeditor\\lang 请注意是分别在 en js zh js zh cn js 中增加 insertcode: Insert Code insertcode: 插入代码 insertcode: 插入代码一定要按这个顺序加哦

如下图是en js中的 zh cn js zh js我就不一一截图了最后在页面上添加如下引用

　　View Code <link type= text/css rel= stylesheet /><link type= text/css rel= stylesheet /><script type= text/javascript src= syntaxhighlighter_ /scripts/shCore js ></script><script type= text/javascript src= syntaxhighlighter_ /scripts/shBrushes js ></script><script type= text/javascript src= ckeditor/ckeditor js ></script>

　　页面的代码如下 View Code<form id= form runat= server > <div> <asp:TextBox ID= txtcontent runat= server TextMode= MultiLine Height= px Width= % ></asp:TextBox> <script type= text/javascript > CKEDITOR replace( <%= txtcontent ClientID %> skin: office ); </script> </div> </form>

cha138/Article/program/net/201311/12844