### UEditor 富文本web編輯器 **插件名：** UEditor 是由百度「FEX前端研發團隊」開發的所見即所得富文本web編輯器. **位置：** Public\plug\ueditor **插件地址：** http://ueditor.baidu.com/website/download.html **調用：** ~~~ <script type="text/javascript" charset="utf-8" src="__PUBLIC__/plug/ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="__PUBLIC__/plug/ueditor/ueditor.all.min.js"> </script> <script type="text/javascript" charset="utf-8" src="__PUBLIC__/plug/ueditor/lang/zh-cn/zh-cn.js"></script> ~~~ **完整代碼：** html ~~~ <div class="form-group"> <label class="col-sm-2 control-label">圖文詳情：</label> <div class="col-sm-10"> <script id="editor" attr = "{$spu_info.id}" type="text/plain" name = "content" style="width:800px;height:500px;">{$spu_info.graphic_details|htmlspecialchars_decode}</script> </div> </div> ~~~ js ~~~ $(document).ready(function() { setUeditor(); }) ~~~ 函數封裝 ~~~ function setUeditor() { //實例化編輯器 //建議使用工廠方法getEditor創建和引用編輯器實例，如果在某個閉包下引用該編輯器，直接調用UE.getEditor('editor')就能拿到相關的實例 var ue = UE.getEditor('editor', { toolbars: [ [ 'fullscreen', 'source', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough','|', 'forecolor', 'backcolor', '|','insertorderedlist', 'insertunorderedlist', '|', 'paragraph', 'fontfamily', 'fontsize', '|', ], [ 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|', ], [ 'simpleupload', 'insertimage','background', '|', 'horizontal','inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols','|', ] ], autoHeightEnabled: true, autoFloatEnabled: true, catchRemoteImageEnable:false, }); //當action等于uploadimage時調用我們自己的上傳接口，否則走原有的ueditor的接口 UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl; UE.Editor.prototype.getActionUrl = function(action) { if (action == 'uploadimage') { return "/index.php/Woms/Goods/Listing/uploadDetailImage.html"; } else { return this._bkGetActionUrl.call(this, action); } } } ~~~ **截圖：**  **插件初始化：** 1、引入插件時，需要對插件進行初始化，最簡單的代碼只需要 ~~~ var ue = UE.getEditor('editor', {}） ~~~ 2、設置初始高度，這里設置自適應高度 ~~~ var ue = UE.getEditor('editor', { autoHeightEnabled: true, autoFloatEnabled: true, }); ~~~ **工具欄按鈕配置：** 插件工具欄默認展示的按鈕較多，插件在“ueditor.config.js”文件中統一定義。  我們可以在模板js中添加配置，定制自己需要的按鈕，配置項里用豎線 '|' 代表分割線  1、簡單列表 ~~~ toolbars: [['fullscreen', 'source', 'undo', 'redo', 'bold']] ~~~ 2、多行列表 ~~~ toolbars: [['fullscreen', 'source', 'undo', 'redo'],['bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc']] ~~~ 3、完整的按鈕列表： ~~~ 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', // 圖表]] ~~~ **配置Ueditor直接上傳圖片到圖片服務器：** 百度的富文本編輯器Ueditor默認是把圖片傳到應用服務器上，但是在實際項目中，往往不會把圖片直接上傳到后端服務器上，而是上傳到圖床或者CDN上。 1、在模板頁面中重寫getActionUrl方法，讓它返回我們自己的上傳圖片接口地址就可以了 在編輯的頁面中加入以下代碼，其中當action等于uploadimage時調用我們自己的上傳接口，否則走原有的ueditor的接口 ~~~ UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl; UE.Editor.prototype.getActionUrl = function(action) { if (action == 'uploadimage') { return '/mycontroller/uploadimage'; } else { return this._bkGetActionUrl.call(this, action); } } ~~~ 2、同時在初始化Ueditor時將遠程抓取圖片的功能關閉，否則會在復制粘貼時自動講一個CDN上的圖片抓取保存到本地服務器 ~~~ var ue = UE.getEditor('container',{ catchRemoteImageEnable:false, }) ~~~ 3、編寫后端接口 后端的PHP接口讀取上傳文件內容，然后調用圖床或者CDN提供的上傳接口就可以了，注意這里接口返回的數據格式應與Ueditor接口返回的相同，否則會報錯 ~~~ <?php public function uploadDetailImage() { $file = $_FILES['upfile']; if ($_FILES["file"]["error"] == 0) { //上傳文件到OSS $img_name = $file['name']; // 圖片原名 $img_uri = $file['tmp_name']; // 臨時文件的全路徑 $suffix = substr($img_name,strrpos($img_name,".")+1); // 獲取圖片后綴名 // 生成新圖片在OSS服務器上的地址 $date_time=date("Ymd",time()); $random = rand(1,99999); $name = time().$random.'.'.$suffix;// 拼接圖片名稱 $base = 'Uploader/ueditor/'.$date_time.'/'.$name;// 拼接上傳到oss之中的路徑 // 圖片上傳到云服務器上 import("Common.Util.Oss.Oss"); $oss = new \Oss();// 實例化oss類 $oss-> upload($base, $img_uri); $url = "http://img.coscia.com.cn/".$base; $res = array( "state" => "SUCCESS", //上傳狀態，上傳成功時必須返回"SUCCESS" "url" => $url, //CDN地址 "title" => $name, //新文件名 "original" => $file['name'], //原始文件名 "type" => $file['type'], //文件類型 "size" => $file['size'], //文件大小 ); $this->ajaxReturn($res); } } ?> ~~~   具體原理參見： https://blog.csdn.net/u011897301/article/details/72911829?locationNum=10&fps=1