UEditor是由百度WEB前端研發部開發的所見即所得的開源富文本編輯器，具有輕量、可定製、用戶體驗優秀等特點。本文主要講解CI框架如何整合UEditor編輯器進行前後端配置、配置上傳路徑及實現上傳功能。
詳情如下：
1. 戳 https://ueditor.baidu.com/website/download.html 下載並解壓至項目文件根目錄下，一般下載ubuilder版。
2. 解壓好的目錄爲
-ueditor
----dialogs 彈出對話框對應的資源和JS文件
----lang 編輯器國際化顯示的文件
----php 涉及到服務器端操作的後臺文件
----themes 樣式圖片和樣式文件
----third-party 第三方插件(包括代碼高亮，源碼編輯等組件）
----ueditor.all.js 開發版代碼合併的結果,目錄下所有文件的打包文件
----ueditor.all.min.js ueditor.all.js文件的壓縮版，建議在正式部署時採用
----ueditor.config.js 編輯器的配置文件，建議和編輯器實例化頁面置於同一目錄
----ueditor.parse.js 編輯的內容顯示頁面引用，會自動加載表格、列表、代碼高亮等樣式,具體看內容展示文檔
----ueditor.parse.min.js ueditor.parse.js文件的壓縮版，建議在內容展示頁正式部署時採用
3. 修改ci/ueditor/ueditor.config.js
var URL = window.UEDITOR_HOME_URL || getUEBasePath();
UEDITOR_HOME_URL: URL
serverUrl: URL + "php/controller.php"
修改爲
var URL = window.UEDITOR_HOME_URL || "/ci/ueditor/";
UEDITOR_HOME_URL: "/ci/ueditor/"
serverUrl: "/ci/ueditor/php/controller.php"
4. 前端配置
在你所要集成編輯器的前端頁面添加如下語句
<body>
<!-- 配置文件 -->
<script type="text/javascript" src="<?php echo base_url() ?>ueditor/ueditor.config.js"></script>
<!-- 編輯器源碼文件 -->
<script type="text/javascript" src="<?php echo base_url() ?>ueditor/ueditor.all.js"></script>
<!-- 實例化編輯器 -->
<script type="text/javascript">
var editor = UE.getEditor('container');//container爲表單的id，可在同一頁面實例化多個編輯器
</script>
<form action="server.php" method="post"> /* serve.php爲你點擊提交表單的的鏈接 */
<!-- 加載編輯器的容器 -->
<script id="container" name="content" type="text/plain">
這裏寫你的初始化內容
</script>
</form>
</body>
注意：如需自定義工具欄內容，在實例化編輯器時修改以下代碼
var editor = UE.getEditor('container', {
toolbars: [
['fullscreen', 'source', 'undo', 'redo', 'bold', 'italic',
'underline','fontborder', 'backcolor','insertcode', 'fontsize', 'fontfamily',
'justifyleft', 'justifyright','justifycenter', 'simpleupload',
'insertimage','justifyjustify',
'strikethrough','superscript', 'subscript', 'removeformat',
'formatmatch','autotypeset', 'blockquote', 'pasteplain', '|',
'forecolor', 'backcolor','insertorderedlist', 'insertunorderedlist',
'selectall', 'cleardoc', 'inserttable', 'emotion', 'help']
]
});
另附完整工具欄如下：
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’, // 圖表 ] ]
5. 服務端整合
現在在前端已經可以成功顯示出UEditor編輯器了，接下來我們來進行服務端整合以實現上傳功能。首先在CI框架的controllers目錄下創建名爲ueditorup的.php文件並在此文件創建同名的類（UeditorUp），百度編輯器的所有上傳功能都將在這個類裏實現（圖片、塗鴉、視頻，附件上傳）。
然後我們需要將Uploader.class.php放入CI框架的libraries目錄下，並更名爲Myuploader.php，然後將該類提供的構造方法替換掉。這是爲了與前端編輯器上傳功能完美銜接，所以沒有使用CI框架的上傳處理功能。不過爲了讓上傳更加安全，增加了上傳文件的MIME類型判斷，判斷代碼就直接來自CI框架的上傳類，配置都放在mimeconfig.php配置文件中。
替換構造方法爲：
public function __construct()
{
}
public function Init($fileField , $config , $base64 = false)
{
$this->fileField = $fileField;
$this->config = $config;
$this->stateInfo = $this->stateMap[ 0 ];
$this->upFile( $base64 );
}
6. 修改上傳路徑
找到ueditor/php/config.json文件，可以看到所有配置項都有明確註釋，默認上傳路徑爲根目錄下/ueditor/php/upload/image/文件夾中，如果遇見問題可以參照官方文檔 http://fex.baidu.com/ueditor/#server-deploy 中的例子進行配置。