ueditor 1.4.3 单独调用图片上传

作者: haibao 分类: 笔记 发布时间: 2014-11-07 09:51
我始终记住:青春是美丽的东西,而且对我来说它永远是鼓舞的源泉。——巴金

今天正好用到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 单独调用图片上传],如没有标注转载,均为原创,转载请保留出处和链接,欢迎分享 谢谢。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

4 条评论
  • 橙子

    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

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

    1. haibao

      2014/11/10 下午 5:09

      明哥果然牛B! :smile:

发表评论

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

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>