UEditor整合代碼高亮插件SyntaxHighlighter

時間 2019-11-19

標籤 ueditor 整合代碼插件 syntaxhighlighter 简体版

原文原文鏈接

1 下載UEditor ： http://ueditor.baidu.com/website/download.htmljavascript

下載SyntaxHighlighter ：https://github.com/syntaxhighlighter/syntaxhighlighter （版本：3.0.83）php

2 UEditor的功能太多，根本就不用向用戶開放這麼多功能。css

首先，UEditor的元素路徑就不用顯示給用戶看了，沒這個必要，html

打開ueditor.config.js。以下圖所示，將關於元素路徑的第250行的註釋去掉，java

將默認的true改爲false，這裏注意前面的逗號不能去掉，由於這行其實是處於一個超大的Json數組裏面，此乃其中的一個元素git

3 打開ueditor.all.js 自行選擇要處理的代碼語言github

測試代碼web

html部分：index.html編程

<!DOCTYPE>   
<html>      
 <head>         
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">           
   <title>UEditor</title>       
     </head>      
      <body>      
<div style="width:99%">       
<form action="test.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="./ueditor/ueditor.config.js"></script><!-- 配置文件 --> 
<script type="text/javascript" src="./ueditor/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>

PHP 部分：test.php數組

<!DOCTYPE> 
<html> 
<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="index.html">返回</a></p>
</body>
</html>