ueditor 1.4.3 单独调用图片上传
本文最后更新于2014-11-07，已超过 1年没有更新，如果文章内容、图片或者下载资源失效，请留言反馈，我会及时处理，谢谢！
历史上的今天：10月20日 - 1962年，中印边境自卫反击战爆发
周六下午好， 本文除去代码部分，共1300个字，预计阅读时间需要4分钟。
今天正好用到ueditor图片上传，整了好久发现官方居然少写了一句代码，害的我们都没法监听到上传后的事件。下面我把详细的调用方法记录下来，如果有不妥的地方欢迎指出：
1.首先要到ueditor官网(http://ueditor.baidu.com/website/download.html)下载你所需版本，放到你的项目下，下面我都是以[1.4.3 PHP 版本 UTF-8版]做演示。
2.引入2个必要的JS文件（路径自己改哦）：
1 2 3 | <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.min.js"></script> |
3.接下来，在html的body中放入文本框和上传按钮：
1 2 3 | <input type="text" id="cover" readonly="readonly" value="" name="cover" /> <script id="myEditor" type="text/plain" style="display: none;"></script> <input type="button" class="btn btn-danger" id="uploadBtn" value="上传图片"/> |
4.下面该写JS代码了：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <script>
//图片上传
(function($) {
var image = {
editor: null,
init: function(editorid, keyid) {
var _editor = this.getEditor(editorid);
_editor.ready(function() {
_editor.setDisabled();
_editor.hide();
_editor.addListener('beforeinsertimage', function(t, args) {
$("#" + keyid).attr("value", args[0].src);
});
});
},
getEditor: function(editorid) {
this.editor = UE.getEditor(editorid);
return this.editor;
},
show: function(id) {
var _editor = this.editor;
//注意这里只需要获取编辑器，无需渲染，如果强行渲染，在IE下可能会不兼容（切记）
$("#" + id).click(function() {
var image = _editor.getDialog("insertimage");
image.render();
image.open();
});
},
render: function(editorid) {
var _editor = this.getEditor(editorid);
_editor.render();
}
};
$(function() {
//myEditor对应你html中的：<script id="myEditor" type="text/plain" style="display: none;"></script>
//cover对应你html中的文本框ID：<input type="text" id="cover" readonly="readonly" value="" name="cover" />
//uploadBtn对应你html中的上传按钮ID：<input type="button" class="btn btn-danger" id="uploadBtn" value="上传图片"/>
var editor = UE.getEditor('myEditor');
image.init("myEditor", "cover");
image.show("uploadBtn");
});
})(jQuery);
</script> |
5.奇葩的事情发生了，监听不到beforeinsertimage的事件，我一开始说了，是因为百度哪个家伙写的时候忘记了一句代码，加上就好。
找到ueditor/dialogs/image/image.js，大约107行的样子，如下图：
有木有 editor.execCommand(‘insertimage’, list); 这句？ 只要在这句前面加上下面这句即可： editor.fireEvent(‘beforeinsertimage’, list);
OK，事情就是这样滴的结束了，效果如下：
橙子 - Windows 7 | Chrome 63.0.3239.132
2018-01-12 11:17
请参考http://blog.csdn.net/kh717586350/article/details/79041939
健健 - 未知操作系统 | 未知浏览器
2017-02-20 17:45
博主，想问一下，我用了你的这个方法，也成功了，但我想问一下，上传图片后的返回值（也就是图片在服务器上的地址）怎么获得呢？我的qq是924325679，希望能交流一下。
你哥 - Windows NT | Firefox 33.0
2014-11-10 01:20
哥在你的修改基础上加了文件上传及调用插件。
haibao - Windows 7 | Firefox 32.0
2014-11-10 17:09
明哥果然牛B！