zoukankan      html  css  js  c++  java
  • ueditor 单独图片上传 转载

    <body>
    <script type="text/javascript">
        //这个是图片上传的,网上还有附件上传的
        (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) {
                            //将地址赋值给相应的input
                            $("#" + keyid).val(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() {
                image.init("myeditor", "upload");
                image.show("image");
            });
        })(jQuery);
    </script>
    <script type="text/javascript">
        //    必须有这个东西,不然,图片上传没法用。如果你独立上传图片,并且需要修改图片路径的话,你就模仿下面的代码
        var editor = UE.getEditor('myeditor', {
            imageUrl: "{:U(GROUP_NAME.'/Cases/upload/')}",
            imagePath: "__ROOT__/Uploads/",
            imageManagerUrl: "{:U(GROUP_NAME.'/cases/imagesManager/')}",
            imageManagerPath: "__ROOT__/"
        });
    </script>

    <form method='post' action='{:U(GROUP_NAME."/Cases/save")}' enctype="multipart/form-data">
        <table class="table">
            <tbody>
            <tr>
                <td class="title_td">标题:</td>
                <td class="input_td"><input type='text' name='title' style=' 300px'/></td>
            </tr>
    
            <tr>
                <td class="title_td">图片:</td>
                <td class="input_td">
                    <input id="upload" name='upload' type="text" style=' 300px' value=""/>
                    <script id="myeditor"></script>
                    <input type="button" id='image' value='上传图片'/>
    
                </td>
            </tr>
    
            <tr>
                <td colspan="2">
    
                    <input type='submit' value="提交保存"/></td>
    
            </tr>
    
            </tbody>
        </table>
    
    </form>
  • 相关阅读:
    【iCore、iCore2 双核心板】EPCS 实验(SPI Flash)(基于Verilog语言)
    【iCore2双核心板】SRAM 读写实验(基于Verilog语言)
    大便难案
    乌梅丸案二则
    奔豚
    中医对甲流的认识
    大青龙汤临床应用
    中风之补阳还五汤
    时方的魅力
    艾灸急治
  • 原文地址:https://www.cnblogs.com/itafter/p/4136681.html
Copyright © 2011-2022 走看看