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