当前位置: 首页 » 前端开发 » ueditor 1.4.3 单独调用图片上传
 |  全屏浏览  |  字号调整:

ueditor 1.4.3 单独调用图片上传

2014-11-07 09:51:52 前端开发 0 2.31 k 百度已收录
本文最后更新于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,事情就是这样滴的结束了,效果如下:

本文标题:ueditor 1.4.3 单独调用图片上传

本文地址:http://www.hehaibao.com/ueditor-1-4-3-imgupload/

版权声明:本博客所有文章除特别声明外,均采用 署名-非商业性使用-禁止演绎 4.0 国际 许可协议。请尊重他人的劳动成果!

4条评论
  • 橙子 - 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

    哥在你的修改基础上加了文件上传及调用插件。 :grin: :grin: :grin: :grin: :grin: :grin: :grin: :grin: :grin: :grin:

    1. haibao - Windows 7  |  Firefox 32.0

      2014-11-10 17:09

      明哥果然牛B! :smile:


发表评论

电子邮件地址不会被公开。 必填项已用*标注