###百度富文本編輯器使用（PHP）：
一，百度富文本編輯器（PHP 完整版）
1，下載： http://ueditor.baidu.com/website/download.html#mini
1，放置的位置：自己隨便，laravel放在public中；CI放在目錄存放js的目錄中
2，先引入jquery,再放置編輯器的js(瀏覽器的加載機制所決定的)
<style>
<link href="/global/js/ueditor/themes/default/css/ueditor.css" type="text/css" rel="stylesheet">
</style>
<script>
<!--引入jQuery-->
<script type="text/javascript" src="/global/js/ueditor/third-party/jquery.min.js"></script>
<!--百度富文本編輯器配置-->
<script type="text/javascript" src="/global/js/ueditor/ueditor.config.js"></script>
<!--百度富文本編輯器JS-->
<script type="text/javascript" src="/global/js/ueditor/ueditor.all.min.js"></script>
<!--語言包-->
<script type="text/javascript" src="/global/js/ueditor/lang/zh-cn/zh-cn.js"></script>
</script>
問題：百度UE，可能出現錯誤 ZeroClipboard is not defined (引入了Require.js(bootstrap兼容IE8)，會出現)
$ 不要修改原有的代碼邏輯 $
&1，首先是修改配置：
require.config({
baseUrl: '',
paths: {
ZeroClipboard: "./UEditor.../ZeroClipboard"//主要是加這句話
}
});
&2，然后是在調用這個模塊並把模塊定義到全局變量
<script>
require(["ZeroClipboard"],function(ZeroClipboard){
window.ZeroClipboard = ZeroClipboard;
});
</script>
3,使用完整版（html）：
<div id = "js-container"></div>
<script>
require(["ZeroClipboard"],function(ZeroClipboard){
window.ZeroClipboard = ZeroClipboard;
});
// 百度富文本編輯器的配置文件，會覆蓋 ueditor.config.js中對應的選項
$config = {
serverUrl:'/blog/ueditor/',//圖片上傳地址
// 工具欄，自己選擇增刪
toolbars: [[
'fullscreen', 'source', '|', 'undo', 'redo', '|',
'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
'directionalityltr', 'directionalityrtl', 'indent', '|',
'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
'simpleupload', 'emotion', '|',
'horizontal', 'date', 'time', 'spechars', '|',
'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts'
]]
};
var ue = UE.getEditor('js-container',$config);// 實例化編輯器
</script>
2，PHP配置：（可以使用百度編輯器自帶的PHP），一般用不上，自己要根據項目來配置
1，編輯器上傳圖片或者文件的思路：
@1，利用文件上傳模塊原有機制，將上傳的文件保存在臨時目錄
@2，移動文件到我們期望的目錄，並更改文件名防止重名。
@3，將移動后的目錄以及文件名稱等信息轉發給后台web程序，由web程序自己將信息寫入自己的數據庫。
2，配置文件（ /* 具請體看線上文檔=>fex.baidu.com/ueditor/#use-format_upload_filename */）
config/ueditor.php [ CI框架 ]
<?php
//百度編輯器配置
/* 前后端通信相關的配置,注釋只允許使用多行方式 */
$config["ueditor_config"] = [
/* 上傳圖片配置項 */
"imageActionName"=>"uploadimage", /* 執行上傳圖片的action名稱 */
"imageFieldName"=>"upfile", /* 提交的圖片表單名稱 */
"imageMaxSize"=>5242880, /* 上傳大小限制5MB，單位B */
"imageAllowFiles"=>[".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上傳圖片格式顯示 */
"imageCompressEnable"=>true, /* 是否壓縮圖片,默認是true */
"imageCompressBorder"=>1600, /* 圖片壓縮最長邊限制 */
"imageInsertAlign"=>"none", /* 插入的圖片浮動方式 */
"imageUrlPrefix"=>"", /* 圖片訪問路徑前綴 */
//"imagePathFormat"=>"/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
/* {filename} 會替換成原文件名,配置這項需要注意中文亂碼問題 */
/* {rand:6} 會替換成隨機數,后面的數字是隨機數的位數 */
/* {time} 會替換成時間戳 */
/* {yyyy} 會替換成四位年份 */
/* {yy} 會替換成兩位年份 */
/* {mm} 會替換成兩位月份 */
/* {dd} 會替換成兩位日期 */
/* {hh} 會替換成兩位小時 */
/* {ii} 會替換成兩位分鍾 */
/* {ss} 會替換成兩位秒 */
/* 非法字符 \ =>* ? " < > | */
/* 具請體看線上文檔=>fex.baidu.com/ueditor/#use-format_upload_filename */
];
// ========================================================================
2-2，PHP 具體使用
<script>
//-- 百度富文本編輯器 new UE -------------------
var ueditor = null;
$config = { // 配置
serverUrl: '/editor/report.php',
// 工具欄，自己選擇增刪
toolbars: [[
'fullscreen', 'fontsize', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'forecolor', 'link',
]],
autoHeightEnabled: false,
};
//--------------------------------------------
// 2-1-1, 獲取vue上的數據放到編輯中 ===========================
//-- 百度富文本 【新增】 -----------------
ueditor = UE.getEditor('txtDesc', $config);
//-----------------------------------------
// 2-1-2, 將編輯器中數據ueditor.getContent()重新賦值到vue中 ========
//-- 百度編輯器 獲取文本框輸入的值 --------
this.childReport.sDesc = ueditor.getContent();
//----------------------------------------
</script>
// php 提供 action=config的接口
$action = $_aRequest['action'] ? trim($_aRequest['action']) : '';
if ($action == 'config') {
exit('{
/* 上傳圖片配置項 */
"imageActionName": "uploadimage", /* 執行上傳圖片的action名稱 */
"imageFieldName": "upfile", /* 提交的圖片表單名稱 */
"imageMaxSize": 5242880, /* 上傳大小限制，單位B */
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上傳圖片格式顯示 */
"imageCompressEnable": true, /* 是否壓縮圖片,默認是true */
"imageCompressBorder":1600,
"imageInsertAlign":"none",
"imageUrlPrefix":"", /* 圖片訪問路徑前綴 */
/* 上傳視頻配置 */
"videoActionName": "uploadvideo", /* 執行上傳視頻的action名稱 */
"videoFieldName": "upfile", /* 提交的視頻表單名稱 */
"videoUrlPrefix": "", /* 視頻訪問路徑前綴 */
"videoMaxSize": 102400000, /* 上傳大小限制，單位B，默認100MB */
/* 上傳視頻格式顯示 */
"videoAllowFiles": [
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"],
}');
}
// ============================================================================
3，自己接收參數
define(STATIC_IMG,'http://www.xxx.com/');//域名，服務器
$fileName = 'upfile';// 提交的圖片表單名稱,百度編輯器
$saveImgPath = "/upload/" . date("Ymd") . "/";//上傳圖片的臨時目錄
$imgPath //服務器返回的路徑，要存儲到數據庫中
$state = "SUCCESS"; // 上傳成功，返回值
$imgPath = STATIC_IMG . $imgPath;
$getFileInfo = array(
"url" => $imgPath,//圖片url路徑
"state" => $state,//上傳狀態
);
echo json_encode($getFileInfo);
4，接收返回值，回填頁面
$(".sCoverImgPath").change(function () {
ajaxFabricUpload(this);
});
window.ajaxFabricUpload = function(o) {
var name = $(o).prop("name");
var options = {
type:'post',
url:'xxxxx ?time='+Math.random(),
dataType:'json',
success: function(obj) {
if(obj["state"]=='SUCCESS'){
$("#sCoverImgPath").val(obj["url"]);
var src = STATIC_IMG+obj["url"];
$("#sCoverPathShow").prop("src",src);// 默認圖，有就要替換
}else{
layer.alert(obj.state);
}
},
error: function(error) {
alert("上傳圖片失敗！");
}
};
$("#myform").ajaxSubmit(options);
};
5，比 mini 多了一個 http://xxxxx/xxx/ueditor/?action=config&noCache=1534926630589
二，百度富文本編輯器（PHP mini版）
1，下載： http://ueditor.baidu.com/website/download.html#ueditor
<script>
$config = {
imageUrl:'/xxxx/',//圖片上傳地址
imageFieldName:"upfile",//圖片數據的key,若此處修改，需要在后台對應文件修改對應參數
imagePath:文件域名,
// 工具欄
toolbar:[
'source | undo redo | bold italic underline strikethrough | superscript subscript | forecolor backcolor | removeformat |',
'insertorderedlist insertunorderedlist | selectall cleardoc paragraph | fontfamily fontsize' ,
'| justifyleft justifycenter justifyright justifyjustify |',
'link unlink | emotion image ','| horizontal'
]
};
var ue = UM.getEditor('js-container',$config);// 實例化編輯器，與完整版的實例化是不同的
</script>
public function upload($type)
{
if ($type == '1') {
$fileName = 'ImgPath';// 上傳的文件,本地封面圖
$saveImgPath = "/ImgPath/" . date("Ymd") . "/";
} elseif ($type == '2') {
$fileName = 'upfile';
$saveImgPath = "/upfile/" . date("Ymd") . "/";
}
if (isset($_FILES[$fileName]) && $_FILES[$fileName]["error"] != 4) {
//圖片上傳
$imgPath = $this->uploadpic->Pic($_FILES[$fileName], $saveImgPath);
//處理返回值
if ($imgPath == false) {
json_encode(1001, "上傳封面圖失敗，錯誤：" . $this->uploadpic->Error());
} else {
$state = "SUCCESS";
}
} else {
$state = "圖片不存在或不完整！";
}
$getFileInfo = array(
"url" => $imgPath,//圖片url路徑
"state" => $state,//上傳狀態
);
echo json_encode($getFileInfo);
}