ckeditor+代碼高亮_電腦知識網

       最近由於自己想做一個網站形式的代碼庫自已寫一個在線文本編輯器對於現在的我來確實是很不切實際呵呵！再說了現在有一個非常好的在線文本編輯器（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>

　　怎麼獲取這個文本編輯器裡的文本今天白天再寫吧！

From:http://tw.wingwit.com/Article/program/net/201311/12844.html