UEditor整合代碼高亮插件SyntaxHighlighter,實現發代碼功能

 更新時間:2015-12-01 16:50:34   作者:佚名   我要評論(0)

在《【JavaScript】網頁中對代碼的處理,代碼高亮插件SyntaxHighlighter》(點擊打開鏈接)已經提及到,國內著名,完美兼容IE6的富文本編輯器UEditor已經自然整合代碼高亮插

在《【JavaScript】網頁中對代碼的處理,代碼高亮插件SyntaxHighlighter》(點擊打開鏈接)已經提及到,國內著名,完美兼容IE6的富文本編輯器UEditor已經自然整合代碼高亮插件SyntaxHighlighter插件了,那么如何實現用戶貼代碼功能呢?

值得注意的是,單純的富文本編輯器UEditor寫一段代碼,是無法實現如代碼高亮插件SyntaxHighlighter帶行號、關鍵詞高亮顯示的,僅僅是變了字體而已。要實現代碼高亮,還要自己手動編輯一下。

比如如下圖的效果:

只允許用戶貼JavaScript、php、C&C++、C#、Css、Java、HTML、XML、SQL、Java、VB、SQL、Python這些代碼,當然,你自己還可以根據自己的需要添加。

用戶編輯完功能提交之后,在網頁,對這些代碼段高亮顯示。

制作過程如下:

1、首先到UEditor的官網http://ueditor.baidu.com/website/(點擊打開鏈接)點擊"下載"之后,找到更多歷史版本,選擇適合自己編程語言、網頁編碼的1.3.6。其實,如果你不開上傳功能,各個編程語言的UEditor都是一樣的。選擇1.3.X版,是因為度娘說在1.4以后的版本中開始不兼容IE6、IE7了,當然大家根據自己的網站可以選擇更高更好的版本。

下載UEditor之后將其解壓到你的網站文件夾,隨后與《【JavaScript】網頁中對代碼的處理,代碼高亮插件SyntaxHighlighter》(點擊打開鏈接)一文一樣,下載SyntaxHighlighter,取走里面的scripts、styles,將其部署到你的網站文件夾中。最終的文件結構,如下圖所示:

2、UEditor的功能太多,根本就不用向用戶開放這么多功能。首先,UEditor的元素路徑就不用顯示給用戶看了,沒這個必要,打開ueditor.config.js。如下圖所示,將關于元素路徑的第307行的注釋去掉,將默認的true改成false,這里注意前面的逗號不能去掉,因為這行實際上是處于一個超大的Json數組里面,此乃其中的一個元素。

之后,打開ueditor.all.js,設置允許用戶所貼的代碼,也就是你的網站所能夠解釋的代碼。在第12330行的me.setOpt數組中,將你的網站不打算解釋的代碼注釋掉。此處需要注意的是,無論如何請保留Plain這個代碼,Plain是一個有行號、無代碼關鍵字的解釋器,就是現在CSDN的“其它代碼”。

這里左邊的是SyntaxHighlighter所對應的brush,brush是什么在介紹SyntaxHighlighter的文章已經說過了,這里不再贅述了,右邊是給用戶看的信息,也就是在編輯器上顯示的文字。

3、改好之后,終于可以開始富文本編輯器UEditor的實現,demo.html的代碼如下所示:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">   <html>       <head>           <meta http-equiv="Content-Type" content="text/html; charset=utf-8">           <title>UEditor</title>         </head>       <body>         <div style="width:99%">             <form action="submit.php" method="post">                 標題:<input type="text" name="title" style="width:90%"/><br/>                 內容:                 <textarea id="container" name="content" type="text/plain"></textarea><br/><!--加載編輯器的容器-->                 <input type="submit" value="提交" />             </form>         </div>     </body>   </html>    <script type="text/javascript" src="./ueditor1_3_6-utf8-php/ueditor.config.js"></script><!-- 配置文件 --> <script type="text/javascript" src="./ueditor1_3_6-utf8-php/ueditor.all.js"></script><!-- 編輯器源碼文件 --> <!-- 實例化編輯器 --> <script type="text/javascript">     var ue = UE.getEditor("container",{toolbars:[         [             //'anchor', //錨點             'undo', //撤銷             'redo', //重做             'bold', //加粗             //'indent', //首行縮進             //'snapscreen', //截圖(需要插件,一般不開);             'italic', //斜體             'underline', //下劃線             'strikethrough', //刪除線             'subscript', //下標             //'fontborder', //字符邊框             'superscript', //上標             //'formatmatch', //格式刷             //'source', //源代碼             //'blockquote', //引用             //'pasteplain', //純文本粘貼模式             'selectall', //全選             //'print', //打印             'preview', //預覽             'horizontal', //分隔線             'removeformat', //清除格式             //'time', //時間             //'date', //日期             'unlink', //取消鏈接             //'insertrow', //前插入行             //'insertcol', //前插入列             //'mergeright', //右合并單元格             //'mergedown', //下合并單元格             //'deleterow', //刪除行             //'deletecol', //刪除列             //'splittorows', //拆分成行             //'splittocols', //拆分成列             //'splittocells', //完全拆分單元格             //'deletecaption', //刪除表格標題             //'inserttitle', //插入標題             //'mergecells', //合并多個單元格             //'deletetable', //刪除表格             //'cleardoc', //清空文檔             //'insertparagraphbeforetable', //"表格前插入行"             'insertcode', //代碼語言             'fontfamily', //字體             'fontsize', //字號             //'paragraph', //段落格式             'simpleupload', //單圖上傳             //'insertimage', //多圖上傳             //'edittable', //表格屬性             //'edittd', //單元格屬性             'link', //超鏈接             //'emotion', //表情             'spechars', //特殊字符             'searchreplace', //查詢替換             //'map', //Baidu地圖             //'gmap', //Google地圖             //'insertvideo', //視頻             //'help', //幫助             'justifyleft', //居左對齊             'justifyright', //居右對齊             'justifycenter', //居中對齊             'justifyjustify', //兩端對齊             'forecolor', //字體顏色             //'backcolor', //背景色             //'insertorderedlist', //有序列表             //'insertunorderedlist', //無序列表             //'fullscreen', //全屏             //'directionalityltr', //從左向右輸入             //'directionalityrtl', //從右向左輸入             //'rowspacingtop', //段前距             //'rowspacingbottom', //段后距             //'pagebreak', //分頁             //'insertframe', //插入Iframe             //'imagenone', //默認             //'imageleft', //左浮動             //'imageright', //右浮動             //'attachment', //附件             //'imagecenter', //居中             //'wordimage', //圖片轉存             //'lineheight', //行間距             //'edittip ', //編輯提示             //'customstyle', //自定義標題             //'autotypeset', //自動排版             //'webapp', //百度應用             //'touppercase', //字母大寫             //'tolowercase', //字母小寫             //'background', //背景             //'template', //模板             //'scrawl', //涂鴉             //'music', //音樂             //'inserttable', //插入表格             //'drafts', // 從草稿箱加載             //'charts', // 圖表         ]     ]}); </script>

首先,這里,無須像官方的例子一樣,用script標簽來實現編輯器,就是普普通通的form表單中的textarea就可以,注意其id不能丟,下面的UEditor腳本根據此id來初始化。之后可以看到在初始化的時候,我注釋掉一大堆應用,都什么鬼。一個博客給你加粗、斜體、下劃線、變顏色、字體、居中等已經足夠了,還開放iframe我覺得是這個作死行為。當然,這里由于此文關鍵說明怎么整合富文本編輯器UEditor與代碼高亮插件SyntaxHighlighter,我沒有開放上傳圖片的功能,免得富文本編輯器UEditor的上傳圖片又說一大堆。

此頁demo.html無須解釋用戶貼的代碼,因此也就沒有用代碼高亮插件SyntaxHighlighter。

4、下面看看提交頁submit.php,雖然這里用了php,但就兩句$_POST取表單的值,換成其他語言也一樣:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>結果頁</title>     <!--SyntaxHighlighter的基本腳本-->     <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.js"></script>     <!--SyntaxHighlighter的對各個編程語言解析的腳本-->     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.js"></script>     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushPhp.js"></script>     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJava.js"></script>     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCSharp.js"></script>     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCpp.js"></script>     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushAS3.js"></script>     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushPython.js"></script>     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushVb.js"></script>     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushSql.js"></script>     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.js"></script>     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushPlain.js"></script>     <!--所使用的SyntaxHighlighter樣式-->     <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreEclipse.css"/>     <!--初始化SyntaxHighlighter的必須代碼,必須放在head中,引入文件之后-->     <script type="text/javascript">SyntaxHighlighter.all();</script>     <!--用于消除右上角的廣告-->     <script type="text/javascript">SyntaxHighlighter.defaults['toolbar'] = false;</script> </head>  <body>     <p><b>標題:</b><?php echo $_POST["title"]?></p>     <p><b>內容:</b><?php echo $_POST["content"]?></p>     <p><a href="demo.html">返回</a></p> </body> </html>

此頁的邏輯,與《【JavaScript】網頁中對代碼的處理,代碼高亮插件SyntaxHighlighter》(點擊打開鏈接)一文完全一樣,這里就不再贅述了。

由于富文本編輯器UEditor里面的代碼段,會自動放在pre節點中,同時自動加上代碼高亮插件SyntaxHighlighter里的class="brush:xx",因此,我們只需要在此頁submit.php上加上代碼高亮插件SyntaxHighlighter的JS引用即可。

最終的效果如下圖:

用戶在編輯器編輯時,有明顯的淡灰色背景:

貼完代碼解釋時,對代碼的解釋在IE6也不失色:

基本上能夠100%地滿足論壇、博客貼代碼的需求了。


相關文章

  • 升級百度UEditor的SyntaxHighlighter

    升級百度UEditor的SyntaxHighlighter

    博客文本編輯器使用的是UEditor1.4.3,和Bootstrap還有不兼容,語法高亮效果也很差,于是看了下自帶SyntaxHighlighter的版本,竟然是1.5.1的,而且js文件有160kb。官網Synt
    2015-12-01
  • UEditor整合代碼高亮插件SyntaxHighlighter,實現發代碼功能

    UEditor整合代碼高亮插件SyntaxHighlighter,實現發代碼功能

    在《【JavaScript】網頁中對代碼的處理,代碼高亮插件SyntaxHighlighter》(點擊打開鏈接)已經提及到,國內著名,完美兼容IE6的富文本編輯器UEditor已經自然整合代碼高亮插
    2015-12-01

最新評論

买宝宝用品赚钱吗 江苏快三彩票app 一分快3大小计划 怎么买股票 浙江6十1几点开奖 江苏体彩七位数走势图综合版 体彩浙江6十1玩法 北京塞车pk10官网开奖 北京体彩十一五走势图 幸运农场有什么规律 安徽快3攻略 黑龙江七星彩开奖结果 吉林新快三开奖号码 爆中3组平特三连肖 股票多少钱能开户 建行理财 青海快三结果查询