Ueditor单独调用图片上传 多编辑器共存的取值问题解决

最近建站中需要一个文本编辑器,和一个图片上传的功能,编辑文章页面正好有百度ueditor编辑器,于是单独再调一次ueditor编辑器图片上传功能实现单独图片上传,并正确取值

一、引用ueditor配制文件

<script type="text/javascript" charset="utf-8" src="/uedit/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/uedit/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="/uedit/lang/zh-cn/zh-cn.js"></script>

二、随便找位置放置两个编辑器

第一个单独上传图片:<script type="text/plain" id="upload_ue" name='upload_ue'></script>
第二个内容编辑器:<script id="content" name='content' type="text/plain">内容</script>

三、部署两个编辑器

id=content是内容编辑器  id=upload_ue是用于图片上传编辑器(此编辑器后面会隐藏)

window.UEDITOR_CONFIG.textarea='content';
//初始化内容编辑
var editor = UE.getEditor('content');
//图片上传独立使用
var _editor = UE.getEditor('upload_ue');
_editor.ready(function () {
    //_editor.setDisabled();
    _editor.hide();//此处隐藏图片上传的编辑器
    _editor.addListener('beforeInsertImage', function (t, arg) {     //侦听图片上传
        $("#picture").attr("value", arg[0].src);                   //将地址赋值给相应的input
    })
});
function upImage() {
    var myImage = _editor.getDialog("insertimage");
    myImage.open();
}

四、在需要输入图片的地方插入以下代码

<a href="javascript:void(0);" onClick="upImage();">上传图片</a>


PS:网上也有资料显示在ueditor文件夹中找到文件dialogs\attachment\attachment.html中找到代码editor.execCommand("insertHTML",str);在上面添加下面的代码

editor.fireEvent('afterUpfile', filesList);

站长试着找了下没找到,但是beforeInsertImage 这个侦听确实无效,不执行里面的命令。最后把下面这句注释掉就正常执行。

//_editor.setDisabled();

当两个编辑器正常布局后,保存数据,发现两个内容都保存一样的结果。都获得的是第一个上传文件地址。保存的值是错乱。于是给第二步中的两个编辑器分别加上name属性,值与ID一样。再次保存结果正常。


猜您喜欢
    0条评论