<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. 从零开始学android开发-获取控件

    mBtnNews = (Button)findViewById(R.id.btn_news);//获取控件

  2. [Angular2 Router] Understand the Angular 2 Base href Requirement

    The <base href=”/”/> you define will determine how all other assets you plan on loading treat ...

  3. iOS开发——UI高级OC篇&自定义控件之调整按钮中子控件（图片和文字）的位置

    自定义控件之调整按钮中子控件(图片和文字)的位置 其实还有一种是在storyBoard中实现的,只需要设置对应空间的左右间距: 这里实现前面两种自定义的方式 一:imageRectForContent ...

  4. [原创]SQL SERVER 2008R2安装

    配置系统环境说明 操作系统:Windows 7 操作系统版本:旗舰版 SP1 操作系统位数:x64 注:其它系统配置也基本相似,只是可能菜单的名字或者所处位置不一样,具体的配置如有不同,请自行搜索 安 ...

  5. 如何在HTML5 图片预览

    HTML5的 File API允许浏览器访问本地文件系统,借助它我们可以实现以前无法实现的本地图片预览功能. 先介绍下该API实现了那些接口: 1.Blob接口,表示原始的二进制数据,通过它可以访问到 ...

  6. c基础补充

    一:字符串在C语言中 字符串一般是动态分配和字符数组两种形式 动态分配的时候字符串字符串指针是4个字节 字符串的大小根据自己的需要来申请 比如: char * c://C为字符串指针 占用四个字节 c ...

  7. ClamAV

    ClamAV 简介以及适用范围 ClamAV是一个在命令行下查毒软件,因为它不将杀毒作为主要功能,默认只能查出您计算机内的病毒,但是无法清除,至多删除文件.ClamAV可以工作很多的平台上,但是有少数 ...

  8. 关于Android WindowManager显示悬浮窗的动画效果

    要实现WindowManager添加的窗口,实现动画显示,就需要添加如下红色的属性,其他的添加View只要设置其Animations属性也会实现动画,当然自己实现也可,但是能直接用系统的已经实现好的, ...

  9. 嵌入式设备上运行AllJoyn注意事项

    1. 交叉编译AllJoyn库.编译成功后的文件位于:alljoyn-3.3.0-src\build\linux\arm\debug\dist\目录下: 2. 程序要使用AllJoyn,必须要启动al ...

  10. 1.4 Documents,Fields和Schema设计--目录

    1.4.1.Documents,Fields和Schema概述 1.4.2 solr字段类型 1.4.2 solr字段类型--(1.4.2.1)字段类型定义和字段类型属性 1.4.2 solr字段类型 ...