<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 单独图片上传 转载的更多相关文章

  1. 在SAE上使用Ueditor的图片上传功能

    SAE上是没有文件夹读写权限的,所以要在SAE使用Ueditor的图片上传功能须要借助SAE的Storage服务. 一.开通Storage服务 在SAE控制台开通Storage服务,并新增一个doma ...

  2. springboot整合ueditor实现图片上传和文件上传功能

    springboot整合ueditor实现图片上传和文件上传功能 写在前面: 在阅读本篇之前,请先按照我的这篇随笔完成对ueditor的前期配置工作: springboot+layui 整合百度富文本 ...

  3. uEditor独立图片上传

    项目中.上传图片,非常希望有一款比较兼容的查件. 网上找了一些,图片上传立刻显示的js代码,还有uploadify.都会碰到这样那样的不兼容和其它头疼的问题. 后来想,干脆就用php的上传类最干脆.但 ...

  4. ueditor单独调用上传附件和图片的功能

    javascript富文本编辑器使我们添加.编辑网站中的文章更加方便和容易.这些富文本编辑器提供了所见即所得(What You See Is What You Get - WYSIWYG)的功能,可以 ...

  5. 单独调用Ueditor的图片上传功能

    <!DOCTYPE html> <html> <head> <title></title> <script src="/sc ...

  6. 百度Ueditor多图片上传控件

    发现百度的Ueditor富文本编辑器中的多图片上传控件很不错,于是便想着分享出来使用,费了老劲,少不了无名朋友的帮助,也查了不少资料,终于搞定了 发代码给大家,请大家多多指正 1.首先要在html页面 ...

  7. C# .net Ueditor实现图片上传到阿里云OSS 对象存储

    在学习的时候,项目中需要实现在Ueditor编辑器中将图片上传到云储存中,老师演示的是上传到又拍云存储,既然看了一遍,直接照搬不算本事,咱们可以依葫芦画瓢自己来动手玩玩其它的云存储服务. 现在云计算产 ...

  8. 对百度的UEditor多图片上传的一些补充

    我已经写了一篇文章关于百度的UEditor提取多图片上传模块.如果还没有看过,请点击以下链接查看 http://www.cnblogs.com/luke1006/p/3719029.html 出差了两 ...

  9. asp.net 百度编辑器 UEditor 上传图片 图片上传配置 编辑器配置 网络连接错误，请检查配置后重试

    1.配置ueditor/editor_config.js文件,将 //图片上传配置区 ,imageUrl:URL+"net/imageUp.ashx" //图片上传提交地址 ,im ...

随机推荐

  1. BZOJ 1497: [NOI2006]最大获利 最小割

    1497: [NOI2006]最大获利 题目连接: http://www.lydsy.com/JudgeOnline/problem.php?id=1497 Description 新的技术正冲击着手 ...

  2. Codeforces Gym 100187D D. Holidays 排列组合

    D. Holidays Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100187/problem/D ...

  3. Codeforces Round #311 (Div. 2)B. Pasha and Tea 水题

    B. Pasha and Tea Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/557/prob ...

  4. 【PAT】1029. Median (25)

    Given an increasing sequence S of N integers, the median is the number at the middle position. For e ...

  5. [AngularJS] Accessing Scope from The Console

    Using Angular, you can actually access the scope and other things from the console, so when you have ...

  6. oc-27-@property的参数

    //01加强-10 @property .4前 ) @property + 手动实现 ) @property int age; + @synthesize age;//get和set方法的声明和实现都 ...

  7. 《linux性能及调优指南》

    http://blog.chinaunix.net/uid-26000296-id-4065871.html

  8. JB开发之二 [jailbreak，越狱开发研究]

    1.更换壁纸:把图片写到这个目录,/var/mobile/Library/LockBackground.jpg,然后kill the Springboard. 2.把程序添加进通知中心(iOS5以上) ...

  9. C#开源类库

    PDFsharp PDFsharp是一款可以让.NET框架支持的任何语言很容易的创建PDF文件的类库. ASP.NET FO PDF FO PDF 是一款C#编写类似于ASP.NET服务器控件的控件. ...

  10. LeetCode11 Container With Most Water

    题意: Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, a ...