1.下載kindeditor，並解壓到kindeditor目錄，把kindeditor目錄復制到dede的include目錄下（ps：修改kindeditor-all-min.js、lang文件夾下zh-CN.js 兩個文件名不修改文件路徑是錯的，kindeditor-min.js、zh_CN.js）
2.修改dede后台默認編輯器目錄，在后台-系統-系統基本參數-核心參數，Html編輯器修改成kindeditor 並保存
3.給dedecms添加kindeditor編輯器調用代碼 ，此處是utf-8版本的，gbk請自行轉換。修改前務必注意備份文件。
打開 include/inc/inc_fun_funAdmin.php 找到 （ps:搜索 當前版本,暫時取消dedehtml編輯器的支持 就可以找到）
else {
/*
// ------------------------------------------------------------------------
// 當前版本,暫時取消dedehtml編輯器的支持
在它的上面加入
else if($GLOBALS['cfg_html_editor']=='kindeditor') { $fvalue =htmlspecialchars($fvalue); $uploadJson = $GLOBALS['cfg_cmspath']."/include/dialog/kindeditor_post.php"; $fileManagerJson = $GLOBALS['cfg_cmspath']."/include/dialog/kindeditor_manager.php"; $allowFileManager = 'true'; $extendconfig = ''; if($etype == 'Member' || $etype == 'MemberLit' || $etype == 'Diy' || $etype == 'Feedback') { $uploadJson = ""; $fileManagerJson = ""; $allowFileManager = 'false'; $extendconfig = 'allowImageUpload : false,'; $extendconfig .= 'allowFlashUpload : false,'; $extendconfig .= 'allowMediaUpload : false,'; $extendconfig .= 'allowFileUpload : false,'; } $items['Member'] = "[ 'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'cut', 'copy', 'paste', 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/', 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'map', 'pagebreak', 'link', 'unlink', '|', 'about']"; $items['Small'] = $items['MemberLit'] = $items['Diy'] = "[ 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 'insertunorderedlist', '|', 'emoticons', 'image', 'link']"; $items['Feedback']= "[ 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 'insertunorderedlist', '|', 'emoticons']"; $itemconfig = ''; if(isset($items[$etype])) { $itemconfig = "items :{$items[$etype]},"; } $session_id = session_id(); $code = <<<HTML <link rel="stylesheet" href="{$GLOBALS['cfg_cmspath']}/include/kindeditor/themes/default/default.css" /> <link rel="stylesheet" href="{$GLOBALS['cfg_cmspath']}/include/kindeditor/plugins/code/prettify.css" /> <script src="{$GLOBALS['cfg_cmspath']}/include/kindeditor/kindeditor-min.js"></script> <script src="{$GLOBALS['cfg_cmspath']}/include/kindeditor/lang/zh_CN.js"></script> <script src="{$GLOBALS['cfg_cmspath']}/include/kindeditor/plugins/code/prettify.js"></script> <script type="text/javascript"> KindEditor.ready(function(K) { var editor1 = K.create('textarea[name="{$fname}"]', { cssPath : '{$GLOBALS['cfg_cmspath']}/include/kindeditor/plugins/code/prettify.css', uploadJson : '$uploadJson', fileManagerJson : '$fileManagerJson', filterMode: false,//是否開啟過濾模式 extraFileUploadParams: { PHPSESSID : '{$session_id}' }, $extendconfig $itemconfig allowFileManager : {$allowFileManager}, afterBlur: function(){this.sync();} }); prettyPrint(); }); </script> <textarea name="{$fname}" style="height:{$nheight}px;visibility:hidden;width: 100%;">{$fvalue}</textarea> HTML; if($gtype=="print") { echo $code; } else { return $code; }
接下來介紹如何讓kindeditor4.x整合SyntaxHighlighter代碼高亮，因為SyntaxHighlighter的應用非常廣泛，所以將kindeditor默認的prettify替換為SyntaxHighlighter代碼高亮插件
4.首先修改kindeditor代碼高亮寫入pre標簽時的class類名：
打開/kindeditor/plugins/code/code.js，找到類似於這樣一行：打開/kindeditor/plugins/code/code.js，找到類似於這樣一行（ps：還有一個kindeditor-min.js 這里下載時有兩個版本一個壓縮過的一個沒壓縮過的，我用的是沒壓縮的，里面也修改了）
修改之后的
click : function(e) { var type = K('.ke-code-type', dialog.div).val(), code = textarea.val(), cls = type === '' ? '' : type, html = '<pre class="brush:' + cls + '">\n' + K.escape(code) + '</pre> '; if (K.trim(code) === '') { alert(lang.pleaseInput); textarea[0].focus(); return; } self.insertHtml(html).hideDialog().focus(); }
自定義頁面中kindeditor中選擇“插入代碼”的圖標，下拉菜單中的語言選擇項
同樣是打開code.js文件，即可看到對應的選項，此處提供一份已經修改后的代碼，供參考（這里跟kindeditor-min.js一樣）
var lang = self.lang(name + '.'), html = ['<div style="padding:10px 20px;">', '<div class="ke-dialog-row">', '<select class="ke-code-type">', '<option value="js">JavaScript</option>', '<option value="html">HTML</option>', '<option value="css">CSS</option>', '<option value="php">PHP</option>', '<option value="pl">Perl</option>', '<option value="py">Python</option>', '<option value="ruby">Ruby</option>', '<option value="java">Java</option>', '<option value="vb">ASP/VB</option>', '<option value="cpp">C/C++</option>', '<option value="c-sharp">C#</option>', '<option value="xml">XML</option>', '<option value="shell">Shell</option>', '<option value="as3">ActionScript3</option>', '<option value="cf">ColdFusion</option>', '<option value="delphi">Delphi</option>', '<option value="diff">diff</option>', '<option value="erl">Erlang</option>', '<option value="groovy">Groovy</option>', '<option value="jfx">JavaFX</option>', '<option value="plain">Plain Text</option>', '<option value="scala">Scala</option>', '<option value="sql">SQL</option>', '<option value="">Other</option>', '</select>', '</div>', '<textarea class="ke-textarea" style="width:408px;height:260px;"></textarea>', '</div>'].join(''),
此處要注意，選項中，value對應的值要和SyntaxHighlighter的brush aliases對應，SyntaxHighlighter官方支持的brush aliases表如下：
這里提供一份鏈接對照表 傳輸門
kindeditor部分已經改造完畢，到這織夢后台就添加完成了，后台的編輯框就替換完成
多說一句，織夢后台搞了兩天沒有弄出那種發布就高亮所以之能退而求其次用背景色跟邊框標注了，想要的話自己沒有壓縮過的kindeditor的js,中添加自己定義樣式，但前台瀏覽是高亮顯示
織夢后台效果預覽
下面要在頁面中加入SyntaxHighlighter，以支持對代碼的高亮解析了
1.下載SyntaxHighlighter，目前官方的最新版本已經更新到3.0.83，由於官網的下載地址不能打開就不貼了，需要自行百度
2.下載完畢后解壓，我們發現script目錄中有很對js文件，支持不同語言的解析。復制我們需要解析的語言的js文件，到我們項目中所對應的目錄中。 其中：shAutoloader.js //支持語音的自動加載，當然我是把整個插件引入到項目中。
解壓完是這樣的
3.復制解壓文件夾到織夢模板文件中，在文章模板（article_article.html）中引入2個css跟js還有jquery
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <link href="{dede:global.cfg_templets_skin/}/style/syntaxhighli/styles/shCore.css" rel="stylesheet" type="text/css"> <link href="{dede:global.cfg_templets_skin/}/style/syntaxhighli/styles/shThemeDefault.css" rel="stylesheet" type="text/css"> <script src="{dede:global.cfg_templets_skin/}/style/syntaxhighli/scripts/shCore.js"></script> <script src="{dede:global.cfg_templets_skin/}/style/syntaxhighli/scripts/shAutoloader.js"></script>
以下是我自己的路徑
4.這是最重要一步循環解析
在這里解釋一下，scripts文件夾下有很多文件，其中每個.js文件都對應解析一種語言文件，例如你想要解析PHP語言，那么你的顯示頁面中必需要包含shBrushPhp.js文件，如果你只有單一或者2-3種語言選擇這樣頁面加載還行，要是很多容易加大帶寬，影響用戶體現
所以這里用循環解析來做判斷,最好寫在代碼的最后面
<script language="javascript">
function path(){
var args = arguments,
result = [];
for(var i = 0; i < args.length; i++)
result.push(args[i].replace('@', '{dede:global.cfg_templets_skin/}/style/syntaxhighli/scripts/'));//請替換成自己項目中SyntaxHighlighter的具體路徑
return result
};
$(function () {
SyntaxHighlighter.autoloader.apply(null, path(
'applescript @shBrushAppleScript.js',
'actionscript3 as3 @shBrushAS3.js',
'bash shell @shBrushBash.js',
'coldfusion cf @shBrushColdFusion.js',
'cpp c @shBrushCpp.js',
'c# c-sharp csharp @shBrushCSharp.js',
'css @shBrushCss.js',
'delphi pascal @shBrushDelphi.js',
'diff patch pas @shBrushDiff.js',
'erl erlang @shBrushErlang.js',
'groovy @shBrushGroovy.js',
'java @shBrushJava.js',
'jfx javafx @shBrushJavaFX.js',
'js jscript javascript @shBrushJScript.js',
'perl pl @shBrushPerl.js',
'php @shBrushPhp.js',
'text plain @shBrushPlain.js',
'py python @shBrushPython.js',
'ruby rails ror rb @shBrushRuby.js',
'sass scss @shBrushSass.js',
'scala @shBrushScala.js',
'sql @shBrushSql.js',
'vb vbnet @shBrushVb.js',
'xml xhtml xslt html @shBrushXml.js'
));
SyntaxHighlighter.all();
})
</script>
4.至此，我們的頁面應該可以正常高亮顯示代碼了
以下是頁面顯示代碼
