PHPCMS整合百度編輯器UEditor——多是史上最完整教程（之一）

phpcms自帶富文本編輯器爲ckeditor，功能沒必要多說，排版尤爲不便；決定替換爲百度UEditor。

這裏phpcms版本爲V9.5.9，UEditor版本爲[1.4.3.3 PHP版本]——UTF-8版。其他版本大體相同，具體替換步驟以下：（提示：修改文件前請作好備份）

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

2、解壓到phpcms目錄：

    將壓塑包內文件夾重命名爲 ueditor，解壓到phpcms目錄下面的 ./statics/js/ 目錄下：

3、修改ueditor文件夾中 ueditor/php/config.json文件，全局替換：

        （1）替換上傳文件的路徑，將 /ueditor/php/upload/... 替換爲 /uploadfile/...； 以上傳圖片爲例，UEditor默認的圖片上傳路徑設置爲

        phpcms中圖片（附件）的路徑及命名規則是 /uploadfile/年/月日/文件名，其中文件名的命名規則是 「年+月+日+時+分+秒+隨機3位數字」，故這裏替換imagePathFormat的配置項爲：

        其他如下各個上傳配置項的上傳路徑 'XXXXPathFormat' 部分，均替換爲：

        「/uploadfile/{yyyy}/{mm}{dd}/{yyyy}{mm}{dd}{hh}{ii}{ss}{rand:3}」

        （2）配置圖片（附件）的訪問路徑前綴，這一步解決添加內容時，取第一張圖片爲縮略圖的問題（縮略圖不顯示）。以上傳圖片爲例，UEditor默認的圖片訪問路徑前綴爲空：

        這裏修改成你的網站平臺的域名，可在本地創建虛擬站點，如域名爲 http://www.xxx.com，則此處修改成：

        該文件中其他各個有 UrlPrefix（訪問路徑前綴）的地方，都配置爲 http://www.xxx.com

        （3）替換「列出指定目錄「的路徑，主要用於多圖上傳時的在線管理，和附件上傳時的在線附件，原配置爲：

        這裏 ListPath，均替換爲 /uploadfile/ ：

4、修改 .libs/classes/form.class.php文件，將靜態方法 editor 的全部內容替換爲：

public static function editor($textareaid = 'content', $toolbar = 'basic', $module = '', $catid = '', $color = '', $allowupload = 0, $allowbrowser = 1,$alowuploadexts = '',$height = 320,$disabled_page = 0, $allowuploadnum = '10') {
		$str ='';
		if(!defined('EDITOR_INIT')) {
			$str .= '<script type="text/javascript" src="'.JS_PATH.'ueditor/ueditor.config.js"></script>';
			$str .= '<script type="text/javascript" src="'.JS_PATH.'ueditor/ueditor.all.js"></script>';
			$str .= '<script type="text/javascript" src="'.JS_PATH.'ueditor/ueditor.parse.js"></script>';
			$str .= '<link rel="stylesheet" href="'.JS_PATH.'ueditor/themes/default/css/ueditor.css"/>';
			define('EDITOR_INIT', 1);
		}

		if($toolbar == 'basic') {
			$toolbar  = "['fullscreen',";
			$toolbar .= defined('IN_ADMIN') ? "'source'," : '';
			$toolbar .= "'|', 'bold', 'italic', 'link', 'unlink', '|',
		                'insertorderedlist', 'insertunorderedlist',  '|',
		                'selectall', 'removeformat', 'formatmatch', 'cleardoc', '|',                
		                'searchreplace']\r\n";
		} elseif($toolbar == 'full') {
			$toolbar  = "['fullscreen',";			
			$toolbar .= defined('IN_ADMIN') ? "'source'," : '';
			$toolbar .= "'selectall', 'removeformat', 'formatmatch', 'autotypeset', 'cleardoc', 'pasteplain', '|',
	                'undo', 'redo', '|',
	                'indent','justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', 'blockquote', '|', 
	                'insertorderedlist', 'insertunorderedlist',  '|',
	                'simpleupload', 'insertimage', 
	            ],
	            [
	                'customstyle', 'paragraph', 'fontfamily', 'fontsize', 'forecolor', 'backcolor','|',
	                'superscript', 'subscript', '|', 'touppercase', 'tolowercase',
	            ],    
	            [
	                'bold', 'italic', 'underline', 'strikethrough', '|',            
	                'link', 'unlink', '|', 
	                'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
	                'insertvideo', 'music', 'attachment', 'map', 'insertframe', '|',                
	                'inserttable', 'charts', '|',
	                'searchreplace', 'help'
	            ]\r\n";			
		} elseif($toolbar == 'desc') {
			$toolbar = "['fullscreen', 'source', '|', 'bold', 'italic', 'link', 'unlink', '|',
                'insertorderedlist', 'insertunorderedlist',  '|',
                'selectall', 'removeformat', 'formatmatch', 'cleardoc', '|',                
                'simpleupload', 'searchreplace', ]\r\n";
		} else {
			$toolbar = '';
		}

		$str .= "<script type=\"text/javascript\">\r\n";
		$str .= "var editor = new baidu.editor.ui.Editor({textarea:'$textareaid', initialFrameHeight:'$height', wordCount:false, ";
		$str .= "toolbars :\r\n";
		$str .= "[\r\n";
		$str .= $toolbar;
		$str .= "]\r\n";
		$str .= "});\r\n";
        $str .= "editor.render('$textareaid');\r\n"; 
		$str .= '</script>';

        $ext_str = "<div class='editor_bottom'>";   
        if(!defined('IMAGES_INIT')) {
         $ext_str .= '<script type="text/javascript" src="'.JS_PATH.'swfupload/swf2ckeditor.js"></script>';   
         define('IMAGES_INIT', 1);   
        }   
        $ext_str .= '</div>';
        $str .= $ext_str;   
        return $str;
	}

        這裏，設置編輯器默認高度爲 $height = 320 ；並配置了 toolbars參數，與phpcms模型結合，可選擇編輯器爲「標準型」和「簡潔型」（已事先根據須要，修改了標準型和簡潔型工具欄包含的內容，具體方法參照另外一篇博客）。在初始化UEditor時，傳入參數 $height 和 $toolbar:

5、修改UEditor默認大小：  在 statics/js/ueditor/themes/default/css/ueditor.css中，

        找到 .edui-default .edui-editor （大約134行），在其中添加：width:auto !important; 用於UEditor工具欄寬度自適應：

        找到 .edui-editor-iframeholder（大約182行），在其中添加 width:auto !important; 用於UEditor內容框寬度自適應：

6、修改UEditor默認高度：在 statics/js/ueditor/ueditor.config.js中，將 initialFrameHeight: 320的註釋取消。（此處不影響，添加內容時的高度，爲保險起見，建議操做）

    此處 ueditor.config.js文件中，可在22行 下增長代碼 window.UEDITOR_HOME_URL ="/statics/js/ueditor/"; 用於指明UEditor編輯器所在目錄（相對於根路徑）。實踐中發現，不增長也能夠，下面的 getUEBasePath() 會自動獲取。這裏僅作參考。

7、解決 UEditor 編輯時插入表格，前臺頁面不顯示的問題：在模板文件（show.html）中，增長如下UEditor的js解析文件和樣式文件：

<script type="text/javascript" src="{JS_PATH}ueditor/ueditor.parse.js"></script>
<script type="text/javascript">
	setTimeout(function(){
		uParse('.content', {
			'highlightJsUrl':'{APP_PATH}statics/js/ueditor/third-party/SyntaxHighlighter/shCore.js',
			'highlightCssUrl':'{APP_PATH}statics/js/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css'
		})
	}, 300);
</script>

        其中，uParse(' .content' , ......) 的 .content 對應模板文件的內容區 <div class="content">...</div>。若是內容區有具體的ID，可把  .content 換成 #ID。

通過以上步驟，phpcms已基本整合UEditor，能夠知足平常須要。

 

注意：

        一、phpcms自帶的ckeditor在上傳附件時，是操做數據庫的。而替換爲UEditor，僅僅是方便平常操做須要，並未進行數據庫操做。故後臺「附件管理」中沒有數據庫模式，管理附件只能用目錄模式進行。

        二、這裏是將 /根路徑/phpcms/ 中的文本編輯器ckeditor替換爲UEditor， /根路徑/phpsso_server/ 中並未作替換。