由于小编发布的文章经常需要插入代码，而discuz的日志及门户编辑器都没有代码插入功能，于是决心修改一下discuz的日志及门户编辑器在百度也有类似的解决办法，但是只适合老版本的 x1.5 x2.0 Jimmy按照最新discuz官方的程序修改。
门户编辑器插入代码
效果图：
一、修改说明：
修改目的：给日志及门户编辑器添加代码插入功能并实现代码高亮
对应版本：Discuz X系列根据以下修改说明自行修改
支持当前流行的各种编程语言：C#、CSS、C++、Delphi、Java、JavaScript、PHP、Python、Ruby、SQL、Visual Basic、XML / html等
简介： Discuz X日志及门户编辑器整合syntaxhighlighter实现代码高亮,给Discuz X日志及门户编辑器添加代码插入功能，方便文章插入代码
二、所需修改文件：
根目录\source\module\home\home_editor.php 根目录\source\language\home\lang_editor.php 根目录\static\image\editor\editor_base.js 三、修改步骤：
1、修改\source\module\home\home_editor.php文件
查找： - a.icoSwitchMdi{background-position:-671px 0px;width:23px}
在其下插入： - a.icoCode {background-position:-120px -20px}
然后再查找 在其下插入： 接着还是继续查找 在其上插入 复制代码接着为了实现代码预览效果，我们还需在文件最下面找到 - body { margin: 0; padding: 0; word-wrap: break-word; font-size:14px; line-height:1.8em; font-family: Tahoma, Arial, Helvetica, snas-serif; }
在下面加入这段定义pre标签的CSS代码 - pre {
- font-size:9pt;
- font-family:Courier New,Arial;
- border:1px solid #ddd;
- border-left:5px solid #6CE26C;
- background:#f6f6f6;
- padding:5px;
- }
不然你是看不到“预览”效果的。
2、修改\source\language\home\lang_editor.php文件（目的是添加所需语言）
查找
- 'editor_prompt_mp3' => 'mp3 音乐',
在其下加上 - 'editor_code_tip' => '请选择代码语言以便于着色',
- 'editor_code' => '插入代码',
3、修改\static\image\editor\editor_base.js文件
用编辑器打开该文件，在文件末尾加上 - /**
- *创建代码高亮及着色方法
- *Time 2013.10.16 Jimmy
- */
- function createCode(e, show) {
- if(typeof show == 'undefined') {
- var sCode = $('Sourcecode').value;
- var sLan = $('codeLanguage').value;
- sCode = sCode.replace(/\
- if (sCode!=null){
- setCaret();
- format("insertHTML", '
');
- }
- fHide($('createCode'));
- $('Sourcecode').value = ''; //设置初始值
- } else {
- if(gIsIE){
- var e = window.event;
- }
- getCaret();
- var dvCodeBox = $("createCode");
- var iX = e.clientX;
- var iY = e.clientY;
- dvImgBox.style.display = "";
- dvImgBox.style.left = (iX-300) + "px";
- dvImgBox.style.top = 33 + "px";
- }
- }
然后查找 - if(fInObj(el, "createUrl") || fInObj(el, "createImg") || fInObj(el, "createSwf") || fInObj(el, "createPage")){
将这段代码改成 - if(fInObj(el, "createUrl") || fInObj(el, "createImg") || fInObj(el, "createSwf") || fInObj(el, "createPage")|| fInObj(el, "createCode")){
即在上面的代码中加上|| fInObj(el, "createCode") 接着继续查找 将其改成 - icoPage:"createPage",
- icoCode:"createCode"
这段代码
以上还没完，，还有一段重要代码（关于编辑器菜单的）
查找 - var arr = ["fontface", "fontsize", "dvForeColor", "dvPortrait", "divAlign", "divList" ,"divInOut", "editFaceBox", "createUrl", "createImg", "createSwf", "createPage"];
将其改为 - var arr = ["fontface", "fontsize", "dvForeColor", "dvPortrait", "divAlign", "divList" ,"divInOut", "editFaceBox", "createUrl", "createImg", "createSwf", "createPage","creatCode"];
至此文件修改工作就结束了.
4、上传并替换文件
上传以上修改文件至对应目录，并上传下面的附件包文件（syntaxhighlighter代码高亮解析文件）至网站根目录，最后不要忘了到后台—》全局—》其他—》其他头部信息添加下面这段代码 否则是不会有代码高亮效果的注意你文件保存的目录。
以下是syntaxhighlighter代码高亮解析文件 syntaxhighlighter代码高亮解析文件.zip |
