|
最近由于自己想做一个网站形式的代码库自已写一个在线文本编辑器对于现在的我来确实是很不切实际呵呵！再说了现在有一个非常好的在线文本编辑器（ckeditor)了我和必再去费这等功夫呢！有现成的拿过用就是的呗！正所谓的拿来主义！不过这个在线文本编辑器对于我们程序员来说有一个算是缺陷吧！没有代码高亮的功能！这样把代码贴上去很不好看！今天晚上我总是把他给弄出来了当然也采在别人的肩膀上做成的在此感谢他们的分享！费话不多说了！咱们进入正题吧！ 首先去官方网站下载个ckeditor 其次去官方网站下载个syntaxhighlighter 这个是代码高亮插件 下载以后把他们解压加入项目如下所示 然后在ckeditor下面新建一个文件夹命名为insertcode然后在insertcode目录下新建一个pluginjs输入以下代码 CKEDITORpluginsadd(insertcode { requires: [dialog] init: function (a) { var b = aaddCommand(insertcode new CKEDITORdialogCommand(insertcode)); auiaddButton(insertcode { label: alanginsertcodetoolbar command: insertcode icon: thispath + images/codejpg }); CKEDITORdialogadd(insertcode thispath + dialogs/insertcodejs); } }); 目录结构如下图图二 再新建一个images文件夹放入一个codejpg的图片如上图所示当然图片可以从google找一个*大小的就好了 再新建一个dialogs文件夹新建一个insertcodejs输入如下代码 CKEDITORdialogadd(insertcode function (editor) { var escape = function (value) { return value; }; return { title: Insert Code Dialog resizable: CKEDITORDIALOG_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 xhtml] [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 = thisgetValueOf(cb code); lang = thisgetValueOf(cb lang); html = + escape(code) + ; editorinsertHtml(<pre class=\brush: + lang + ;\> + html + </pre>); } onLoad: function () { } }; }); 接下来我们就把高亮插件插入到ckeditor里来找到ckeditor文件夹下的ckeditorjs按ctrl+F查找about找到fullPage:falseheight:plugins:aboutbasicstyles我们在about后面增加insertcode这里就变成plugins:aboutinsertcodebasicstyles 如图 继续查找about找到jadd(about{init:function(l){var m=laddCommand(aboutnew adialogCommand(about));mmodes={wysiwyg:source:};mcanUndo=false;luiaddButton(About{label:llangabouttitlecommand:about});adialogadd(aboutthispath+dialogs/aboutjs);}});我们在这个分号后面增加jadd(insertcode {requires: [dialog]init: function(l){laddCommand(insertcode new adialogCommand(insertcode));luiaddButton(insertcode {label: llanginsertcodetoolbarcommand: insertcodeicon: thispath + images/codejpg});adialogadd(insertcode thispath + dialogs/insertcodejs);}}); 如下图 接下来继续在ckeditorjs查找itoolbar_Basic=这就是CKEditor默认的工具栏了我们在这里加上insertcode比如我的[MaximizeShowBlocksinsertcode] 我添加在如下图选中的文本那个地方 最后一步进入ckeditor\lang请注意是分别在enjszhjszhcnjs中增加insertcode:Insert Codeinsertcode:插入代码insertcode:插入代码一定要按这个顺序加哦 如下图是enjs中的zhcnjszhjs我就不一一截图了 最后在页面上添加如下引用 View Code <link type=text/css rel=stylesheet /> <link type=text/css rel=stylesheet /> <script type=text/javascript src=syntaxhighlighter_/scripts/shCorejs></script> <script type=text/javascript src=syntaxhighlighter_/scripts/shBrushesjs></script> <script type=text/javascript src=ckeditor/ckeditorjs></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> CKEDITORreplace(<%= txtcontentClientID %> { skin: office }); </script> </div> </form> 怎么获取这个文本编辑器里的文本今天白天再写吧！ |
