###百度富文本编辑器使用（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);
}