亲注册登录道勤网-可以查看更多帖子内容哦!(包涵精彩图片、文字详情等)请您及时注册登录-www.daoqin.net
您需要 登录 才可以下载或查看,没有账号?立即注册
x
由于Jimmy发布的文章经常需要插入代码,而discuz的日志及门户编辑器都没有代码插入功能,于是决心修改一下discuz的日志及门户编辑器在百度也有类似的解决办法,但是只适合老版本的 x1.5 x2.0 Jimmy按照最新discuz官方的程序修改。
修改效果展示图,具体演示可参见本站
门户编辑器插入代码
Discuz x3日志门户编辑器增加插入代码功能且代码高亮
效果图:
Discuz x3日志门户编辑器增加插入代码功能且代码高亮
一、修改说明:
修改目的:给日志及门户编辑器添加代码插入功能并实现代码高亮
对应版本: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}
复制代码然后再查找 - <a href="javascript:;" class="icoSwf" id="icoSwf" onclick="createFlash(event, 1);return false;" title="<?php echo lang('home/editor', 'editor_link_flash');?>"></a>
复制代码在其下插入: - <a href="javascript:;" class="icoCode" id="icoCode" onclick="createCode(event,1);return false;" title="<?php echo lang('home/editor', 'editor_code');?>"></a>
复制代码接着还是继续查找 - <div id="createPage" class="eMenu" style="display:none;top:35px;left:26px;width:300px;font-size:12px"></div>
复制代码在其上插入 - <div id="createCode" class="eMenu" style="display:none;top:35px;left:26px;width:400px;font-size:12px">
- <!--?php echo lang('home/editor', 'editor_code_tip');?-->:
- <select name="codeLanguage" id="codeLanguage">
- <option value="php">PHP</option>
- <option value="py">Python</option>
- <option value="sql">SQL</option>
- <option value="vb">Visual Basic</option>
- <option value="xml">Html/XML</option>
- <option value="as3">ActionScript3</option>
- <option value="bash">Bash/shell</option>
- <option value="csharp">C#</option>
- <option value="css">CSS</option>
- <option value="js">JavaScript</option>
- <option value="java">Java</option>
- <option value="perl">Perl</option>
- </select><br>
- <textarea type="text" id="Sourcecode" name="Sourcecode" value=" " style="width:400px;height:200;"></textarea><br>
- <input type="button" onclick="createCode();" name="createURL" value="<?php echo lang('home/editor', 'editor_ok');?>" class="submit">
- <a href="javascript:;" onclick="fHide($('createCode'));return false;"><!--?php echo lang('home/editor', 'editor_cancel');?--></a>
- </div>
复制代码接着为了实现代码预览效果,我们还需在文件最下面找到 - 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(/\<h3>[代码]'+sLan+'代码:</h3><pre class="brush:'+sLan+';auto-links:false;">'+sCode+'</pre>
复制代码 '); } 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代码高亮解析文件)至网站根目录,最后不要忘了到后台—》全局—》其他—》其他头部信息添加下面这段代码 - <script src="static/js/code/scripts/brush.js" type="text/javascript"></script>
- <link type="text/css" rel="stylesheet" href="static/js/code/styles/shCore.css">
- <link type="text/css" rel="stylesheet" href="static/js/code/styles/shThemeDefault.css">
- <script type="text/javascript">
- SyntaxHighlighter.config.clipboardSwf = 'static/js/code//scripts/clipboard.swf';
- SyntaxHighlighter.all();
- </script>
复制代码否则是不会有代码高亮效果的注意你文件保存的目录。
以下是syntaxhighlighter代码高亮解析文件
道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题!
如果您是道勤主机用户,那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信:q792472177免费电话、后台提交工单这些方式联系道勤主机客服!
如果您不是我们的客户也没问题,点击页面最右边的企业QQ在线咨询图标联系我们并购买后,我们为您免费进行无缝搬家服务,让您享受网站零访问延迟的迁移到道勤主机的服务! |