Discuz x3日志门户编辑器增加插入代码功能且代码高亮

2018-10-26 21:23| 发布者: happyxp| 查看: 554| 评论: 0

摘要: 由于小编发布的文章经常需要插入代码,而discuz的日志及门户编辑器都没有代码插入功能,于是决心修改一下discuz的日志及门户编辑器在百度也有类似的解决办法,但是只适合老版本的 x1.5 x2.0 Jimmy按照最新discuz官方 ...
由于小编发布的文章经常需要插入代码,而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文件?

查找:

  1. a.icoSwitchMdi{background-position:-671px 0px;width:23px}
复制代码

在其下插入:

  1. a.icoCode {background-position:-120px -20px}
复制代码

然后再查找

复制代码

在其下插入:

复制代码

接着还是继续查找

复制代码

其上插入

  1. :






复制代码

接着为了实现代码预览效果,我们还需在文件最下面找到

  1. 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代码

  1. pre {
  2. font-size:9pt;
  3. font-family:Courier New,Arial;
  4. border:1px solid #ddd;
  5. border-left:5px solid #6CE26C;
  6. background:#f6f6f6;
  7. padding:5px;
  8. }
复制代码
不然你是看不到“预览”效果的。


2、修改\source\language\home\lang_editor.php文件(目的是添加所需语言)
查找

  1. 'editor_prompt_mp3' => 'mp3 音乐',
复制代码

在其下加上

  1. 'editor_code_tip' => '请选择代码语言以便于着色',
  2. 'editor_code' => '插入代码',
复制代码

3、修改\static\image\editor\editor_base.js文件
用编辑器打开该文件,在文件末尾加上

  1. /**
  2. *创建代码高亮及着色方法
  3. *Time 2013.10.16 Jimmy
  4. */
  5. function createCode(e, show) {
  6. if(typeof show == 'undefined') {
  7. var sCode = $('Sourcecode').value;
  8. var sLan = $('codeLanguage').value;
  9. sCode = sCode.replace(/\
  10. if (sCode!=null){
  11. setCaret();
  12. format("insertHTML", '

    [代码]'+sLan+'代码:

    '+sCode+'

    ');
  13. }
  14. fHide($('createCode'));
  15. $('Sourcecode').value = ''; //设置初始值
  16. } else {
  17. if(gIsIE){
  18. var e = window.event;
  19. }
  20. getCaret();
  21. var dvCodeBox = $("createCode");
  22. var iX = e.clientX;
  23. var iY = e.clientY;
  24. dvImgBox.style.display = "";
  25. dvImgBox.style.left = (iX-300) + "px";
  26. dvImgBox.style.top = 33 + "px";
  27. }
  28. }
复制代码

然后查找

  1. if(fInObj(el, "createUrl") || fInObj(el, "createImg") || fInObj(el, "createSwf") || fInObj(el, "createPage")){
复制代码

将这段代码改成

  1. if(fInObj(el, "createUrl") || fInObj(el, "createImg") || fInObj(el, "createSwf") || fInObj(el, "createPage")|| fInObj(el, "createCode")){
复制代码

即在上面的代码中加上|| fInObj(el, "createCode")

接着继续查找

  1. icoPage:"createPage"
复制代码

将其改成

  1. icoPage:"createPage",
  2. icoCode:"createCode"
复制代码

这段代码

以上还没完,,还有一段重要代码(关于编辑器菜单的)
查找

  1. var arr = ["fontface", "fontsize", "dvForeColor", "dvPortrait", "divAlign", "divList" ,"divInOut", "editFaceBox", "createUrl", "createImg", "createSwf", "createPage"];
复制代码

将其改为

  1. var arr = ["fontface", "fontsize", "dvForeColor", "dvPortrait", "divAlign", "divList" ,"divInOut", "editFaceBox", "createUrl", "createImg", "createSwf", "createPage","creatCode"];
复制代码

至此文件修改工作就结束了.

4、上传并替换文件
上传以上修改文件至对应目录,并上传下面的附件包文件(syntaxhighlighter代码高亮解析文件)至网站根目录,最后不要忘了到后台—》全局—》其他—》其他头部信息添加下面这段代码

[代码]js代码:



 

否则是不会有代码高亮效果的注意你文件保存的目录。
以下是syntaxhighlighter代码高亮解析文件

syntaxhighlighter代码高亮解析文件.zip

最新评论

乐动竞猜社区,成立十年了!

站长自己也搞不懂想做个什么,反正就是一直在努力的做!

Copyright ? 2007-2019 xp6.org Powered by Discuz

QQ|小黑屋|手机版|Archiver|乐动竞猜社区 ( 鲁ICP备13006813号-1 ) 鲁公网安备 37021102000261号
返回顶部