<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. MySQL 127.0.0.1和localhost本质区别

    登录方式: [root@10-4-14-168 ~]# mysql -uroot -p Enter password: 查看权限表 mysql> SELECT user,host,passwor ...

  2. 【M32】在未来时态下发展程序

    1.在未来时态下发展程序,就是接受“事情总会变化”的事实,并准备应对之策. 2.记住,程序的维护者通常不是最初的开发者,因此,设计和实现的时候,应该考虑别人更好地理解,修改自己的程序. 3.重要的一点 ...

  3. Codeforces Round #311 (Div. 2) D. Vitaly and Cycle 图论

    D. Vitaly and Cycle Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/557/p ...

  4. cocos2dx的图片载入

    //data: 图片文件数据 dataLen: 文件长度 bool Image::initWithImageData(const unsigned char * data, ssize_t dataL ...

  5. 分享个新浪下载图片的ProgressBar进度样式

    https://github.com/eltld/ImageLoadProgress2

  6. TP复习4

    <script> window.onload=function(){ if(<{$data.sex}>==0){ document.getElementsByName('sex ...

  7. [Angular 2] Generate and Render Angular 2 Template Elements in a Component

    Angular 2 Components have templates, but you can also create templates inside of your templates usin ...

  8. 关于OpenGL+GLSL深度贴图采样

    作者:Nin+.Lee 邮箱:lilei9110@gmail.com * 本文属原创,转载请注明出处. 在GLSL中,存在着sampler2D和sampler2DShadow两种2D贴图采样器.在对一 ...

  9. 基于jQuery带图标的多级下拉菜单

    之前为大家分享了很多导航菜单.今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业.并且菜单支持无限极下拉,所以对各位Web开发 ...

  10. Jackson学习二之集合类对象与JSON互相转化--转载

    原文地址:http://lijingshou.iteye.com/blog/2003059 本篇主要演示如何使用Jackson对List, Map和数组与JSON互相转换. package com.j ...