<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. 实战项目：通过当当API将订单抓取到SAP(一)

    公司在当当上经营了一家店铺,通过当当提供的API,用C#写代码,通过NCO3.0调用SAP RFC将订单信息抓取到SAP. 如果你是新手,在当当网上有店铺,且你公司使用SAP系统,恭喜你,下面这些代码 ...

  2. Android游戏开发：物理游戏之重力系统开发--圆形自由落体Demo

    本节为大家提供有关物理游戏的知识,讲解了一个简单的圆形自由落体Demo的编写.. Java代码 package com.himi; import java.util.Random; import ja ...

  3. typedef函数指针使用方法

    1.简单的函数指针的应用 形式1:返回类型(*函数名)(參数表) char (*pFun)(int); char glFun(int a){ return;} void main() { pFun = ...

  4. linux消息队列操作

    对消息队列的操作无非有以下三种类型: 1. 打开或创建消息队列消息队列的内核持续性要求每一个消息队列都在系统范围内相应唯一的键值,所以,要获得一个消息队列的描写叙述字,仅仅需提供该消息队列的键值就可以 ...

  5. SQL Sever 2008 数据库文件的备份和还原

    数据库文件备份保存的方式我知道的有两种,第一种就是我们知道到的简单的分离,生成.mdf和.ldf文件,然后使用的时候直接进行附加数据库就可以了. 那么还有生成备份的文件.bak 的,这个操作要在步骤: ...

  6. 终端I/O之获得和设置终端属性

    使用函数tcgetattr和tcsetattr可以获得或设置termios结构.这样也可以检测和修改各种终端选择标志和特殊字符,以使终端按我们所希望的方式进程操作. #include <term ...

  7. 项目源码--Android美图秀秀源码

    下载源码   技术要点:   1. 多种分类分享高清图片 2. 图片缓存技术 3. 图片缩图显示 4. 图片实时加载技术 5. 多点触控技术 6.  HTTP网络数据搜索技术 7.  精美UI图片显示 ...

  8. GNU-ARM汇编

    GNU ARM 汇编指令(2008-10-29 00:16:10) 标签:linux gnu arm 汇编指令 it 分类:技术文摘 第一部分 Linux下ARM汇编语法尽管在Linux下使用C或C+ ...

  9. Masonry 布局 cell 高度适应的一种方案(实现类似朋友圈简单布局)

    来源:伯乐在线 - 夏天然后 链接:http://ios.jobbole.com/89298/ 点击 → 申请加入伯乐在线专栏作者 前言: 我模仿的是微博的布局所以也就没有 评论动态刷新cell. 1 ...

  10. nginx +lua +redis 构建自动缓存系统

    一. nginx环境搭建 第一步下载 LuaJIT-2.0.4.tar.gz http://luajit.org/download/LuaJIT-2.0.4.tar.gz安装 make &&a ...