[php] UEditor编辑器及常见问题_ueditor php deprecated: creation of dynamic proper-CSDN博客

本文链接：https://blog.csdn.net/u010081689/article/details/46674867

UEditor是百度旗下的。主要用来添加文章用的。可定制，可扩展，界面友好的一款编辑器。

插件下载地址：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"/>

JS脚本：

$('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;
}

欢迎关注技术开发分享录：http://fenxianglu.cn/