ueditor 1.4.3 单独调用图片上传
我始终记住:青春是美丽的东西,而且对我来说它永远是鼓舞的源泉。——巴金
今天正好用到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,事情就是这样滴的结束了,效果如下:
橙子
2018/01/12 上午 11:17
请参考http://blog.csdn.net/kh717586350/article/details/79041939
健健
2017/02/20 下午 5:45
博主,想问一下,我用了你的这个方法,也成功了,但我想问一下,上传图片后的返回值(也就是图片在服务器上的地址)怎么获得呢?我的qq是924325679,希望能交流一下。
你哥
2014/11/10 上午 1:20
哥在你的修改基础上加了文件上传及调用插件。
haibao
2014/11/10 下午 5:09
明哥果然牛B!