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='width: 300px'/></td>

        </tr>



        <tr>

            <td class="title_td">图片:</td>

            <td class="input_td">

                <input id="upload" name='upload' type="text" style='width: 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>

 

你可能感兴趣的:(ueditor)