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>
时间: 2024-10-14 11:14:57

ueditor 单独图片上传 转载的相关文章

百度Ueditor多图片上传控件

发现百度的Ueditor富文本编辑器中的多图片上传控件很不错,于是便想着分享出来使用,费了老劲,少不了无名朋友的帮助,也查了不少资料,终于搞定了 发代码给大家,请大家多多指正 1.首先要在html页面中添加对ueditor的脚本引用 <script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="../public/ue

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

SAE上是没有目录读写权限的,所以要在SAE使用Ueditor的图片上传功能需要借助SAE的Storage服务. 一.开通Storage服务 在SAE控制台开通Storage服务,并新增一个domain. 二.修改Ueditor代码 Ueditor处理上传文件的方法在DjangoUeditor/jviews.py中,上传图片的请求是由下面函数处理的 #上传附件 @csrf_exempt def UploadFile(request,uploadtype,uploadpath):     '''

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

javascript富文本编辑器使我们添加.编辑网站中的文章更加方便和容易.这些富文本编辑器提供了所见即所得(What You See Is What You Get - WYSIWYG)的功能,可以像编辑word文档一样,方便地编辑网站中文章,常用于内容管理系统和博客系统等. 百度Ueditor富文本就是其中之一,个人觉得虽然体积大点,不兼容移动端外,其他功能都非常强大,特别是里面的多图上传! 当有些个性化页面需求时,难免会对她一些优化,已让她适合自己的内容,比如单独调用上传图片实现类似于以下

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

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <script src="/scripts/jquery-1.8.3.min.js"></script> 6 <script src="/ueditor/ueditor.config.js" type="text/javascript">&l

v9切换ueditor后图片上传路径问题 改成绝对路径

使用V9切换成ueditor编辑器后,图片上传路径显示的是相对路径,同时会把content字段第一张图这个路径同步到缩略图的thumb字段.thumb字段如果是相对路径的话,前端就不能进行裁剪,APP或者其他应用也不能调用. 于是修改. 我用的是1.4.3版本 找到编辑器目录下的/php/Uploader.class.php文件. 找到getFileInfo()方法,修改成如下代码     public function getFileInfo()     { $dangqian_host = 

UEditor之图片上传如何和真实项目结合

1.首先,我们定义一个名为GetConfigServlet的Servlet,真实项目应该是一个Controller,一样的,这个类就是加载后端配置文件类 package com.ay.servlet; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet;

Ueditor单独调用上传功能

<script type="text/plain" id="myEditor"> </script> <script type="text/plain" id="upload_ue"> </script> <script type="text/javascript"> var editor = UE.getEditor('myEditor', {

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

我已经写了一篇文章关于百度的UEditor提取多图片上传模块.如果还没有看过,请点击以下链接查看 http://www.cnblogs.com/luke1006/p/3719029.html 出差了两个月,又搞了好长时间的WinForm.不好意思这么晚才更新后台上传的流程. 同样是基于.net的. 1.大家要关注一下config文件中对图片上传提交的页面的配置. imageUrl: URL + "net/imageUp.ashx" 2.这个页面的代码主要包含了图片的配置信息并返回图片保

百度ueditor的图片上传,前后端交互使用

百度ueditor的使用 一个文本编辑器,看了网上很多文档写的很乱,这里拾人牙慧,整理下怎么使用. 这个东西如果不涉及到图片附件上传,其实很简单,就是几个前端文件,直接引用,然后配置下ueditor.config.js即可.这里就不多说. 至于图片上传,ueditor 设计的时候是考虑和后端交互的,所以会看到可以下载什么php,java版本,还有很多网上会说道有什么后端配置文件,改那改这的,但是实际上后端存储业务是按照公司实际来的,实践起来并不顺利. 本文重点讲述的只用前端文件和ueditor.