UEditor 独立图片上传功能

一、下载使用ueditor

1、从官网上下载UEditor富文本编辑器

2、学会部署使用ueditor。

二、实现方法

1、在html中放置UEditor编辑器，为了不使独立上传图片功能影响到正常的编辑器，这里要多设置一个UEditor编辑器并且需要隐藏。如下代码，myEditor是正常使用的编辑器，upload_ue为隐藏的编辑器。

<script id="myEditor" type="text/plain"></script>
<script id="upload_ue" type="text/plain" style="display:none"></script>

2、实例化编辑器，并侦听图片上传，实现图片预览

<script type="text/javascript">
    var _editor;
    $(function() {
        //实例化一个编辑器，防止在上面的editor编辑器中显示上传的图片或者文件
        _editor = UE.getEditor('upload_ue');
        _editor.ready(function () {
            //侦听图片上传
            _editor.addListener('beforeInsertImage', function (t, arg) {
                //单图预览
                $("#pic_lsit").attr("src", arg[0].src); 
                //多图预览
                for (var i = 0; i < arg.length; i++) {
                    $("#pic_list").append('<div id="photos'+i+'" style="float:left;"><input type="hidden" name="photos[]" value="'+arg[i].src+'" /><img src="'+arg[i].src+'" width="150" height="150" /><a onclick="removePhoto('+i+')">删除</a></div>');
                }
            });
        });
    });
</script>

ps：实例化编辑器之后，一定要确保编辑器上传图片功能能够实现。

3、添加一个按钮，并绑定onclick事件，用于触发编辑器中的上传图片功能。

<button onclick="upImage()">上传图片</button>

<script>
function upImage() {
    var myImage = _editor.getDialog("insertimage");
    myImage.open();
}
</script>

三、参数配置

1、在/ueditor/php/config.json中修改相关配置

/* 上传图片配置项 */
"imageActionName": "uploadimage", /* 执行上传图片的action名称 */
"imageFieldName": "upfile", /* 提交的图片表单名称 */
"imageMaxSize": 2048000, /* 上传大小限制，单位B */
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
"imageCompressEnable": true, /* 是否压缩图片,默认是true */
"imageCompressBorder": 1600, /* 图片压缩最长边限制 */
"imageInsertAlign": "none", /* 插入的图片浮动方式 */
"imageUrlPrefix": "", /* 图片访问路径前缀 */
"imagePathFormat": "/test2/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

下载测试代码ueditor 独立图片上传