[php] UEditor编辑器及常见问题
UEditor是百度旗下的。主要用来添加文章用的。可定制，可扩展，界面友好的一款编辑器。
![[php] UEditor编辑器及常见问题_第1张图片](http://img.e-com-net.com/image/info5/cb40faedf5c743ff92b2355c1a69b8c9.jpg)
插件下载地址：http://ueditor.baidu.com/website/download.html#ubuilder
使用方法：
引入两个js ueditor.config.js 和 ueditor.all.js 然后实例化编辑器就行了
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ueditor demo</title>
</head>
<body>
<form action="server.php" method="post">
<!-- 加载编辑器的容器 --> <script id="container" name="content" type="text/plain">
这里写你的初始化内容
</script>
</form>
<!-- 配置文件 --> <script type="text/javascript" src="ueditor.config.js"></script>
<!-- 编辑器源码文件 --> <script type="text/javascript" src="ueditor.all.js"></script>
<!-- 实例化编辑器 --> <script type="text/javascript">
var editor = UE.getEditor('container');
</script>
</body>
</html>
接着就是上传路径，只需要把上传路径改成自己的就行了
在config.json里修改就OK了
如果一个页面有多个编辑器：
HTML布局：
<textarea style="width: 100%;height:360px;" name="content" id="content" ueditor ></textarea>
JS脚本：
$('[ueditor]').each(function(index, ele) {
var ue = new UE.ui.Editor();
ue.render(ele);
$(ele).data('ueditor', ue);
});
迷你版的UMEditor添加多个，在imageUp.php配置上传目录就行了
$('[umeditor]').each(function(index,element){
var id='umeditor_'+Math.floor(Math.random()*10000+100);
$(element).attr('id',id);
UM.getEditor(id);
});
//上传文件目录 $Path = "../../../Upload/article/";
通过AJAX动态向编辑器添加HTML
$('.edit').click(function() {
$.post("{:U('ajaxEditProduct')}", {id: $(this).data('id')}, function(res) {
$('#editModal [name="id"]').val(res.id);
$('#editModal #localThumbnail2').attr('src', "__UPLOAD__/product/"+res.thumbnail);
$('#editModal [name="description2"]').val(res.description);
// 动态的向编辑器插入数据 var um = UM.getEditor("umeditor2");
um.execCommand('cleardoc'); // 先清空文档再插入 还可以使用um.setContent(res.detail); um.execCommand('inserthtml', res.detail);
});
});
常见问题一、如果更新不成功，可以把编辑器的内容，赋值到一个隐藏域
隐藏域：
<input name="content2" type="hidden"/>
$('body').on('click', '.btn-submit', function() {
$('[name="content2"]').val(ue.getContent()); // 重新赋值内容 $(this).parents('form').submit();
});
PHP代码：
$data['content'] = $_POST['content2'];
常见问题二、上传文件的路径写到应用目录下
在config.json文件里，改变路径和访问前缀，用图片来示例
"imageUrlPrefix": "http://localhost/house", /* 图片访问路径前缀 */ "imagePathFormat": "/Uploads/content/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
然后在Uploader.class.php文件时修改$rootPath（这个是上传的根路径）
private function getFilePath()
{
$fullname = $this->fullName;
$rootPath = $_SERVER['DOCUMENT_ROOT'].'/house';
if (substr($fullname, 0, 1) != '/') {
$fullname = '/' . $fullname;
}
return $rootPath . $fullname;
}
谢谢关注！