百度开源富文本编辑器 UEditor配置:图片上传和文件上传独立使用方法

使用UEditor编辑器自带的插件实现图片上传和文件上传功能,这里通过配置UEditor单独使用其内置的第三方插件swfupload来实现图片和文件的上传,通过对UEditor配置轻松实现图片批量上传,文件披批量上传

第一步:先配置UEditor

<script src="ueditor/ueditor.config.js"></script>

<script src="ueditor/ueditor.all.min.js"></script>

<script type="text/javascript">

    var editor = UE.getEditor(‘myEditor‘, {

        initialFrameWidth: 800,

        initialFrameHeight: 300,

    });

</script>

第二步:放置编辑器

<script type="text/plain" id="myEditor"></script>

第三步:以上已经把UEditor部署好了,下面实现单独使用图片和文件上传

<script type="text/javascript">

    //重新实例化一个编辑器,防止在上面的editor编辑器中显示上传的图片或者文件

    var _editor = UE.getEditor(‘upload_ue‘);

    _editor.ready(function () {

        //设置编辑器不可用

        _editor.setDisabled();

        //隐藏编辑器,因为不会用到这个编辑器实例,所以要隐藏

        _editor.hide();

        //侦听图片上传

        _editor.addListener(‘beforeInsertImage‘function (t, arg) {

            //将地址赋值给相应的input

            $("#picture").attr("value", arg[0].src);

            //图片预览

            $("#preview").attr("src", arg[0].src);

        })

        //侦听文件上传

        _editor.addListener(‘afterUpfile‘function (t, arg) {

            $("#file").attr("value", _editor.options.filePath + arg[0].url);

        })

    });

    //弹出图片上传的对话框

    function upImage() {

        var myImage = _editor.getDialog("insertimage");

        myImage.open();

    }

    //弹出文件上传的对话框

    function upFiles() {

        var myFiles = _editor.getDialog("attachment");

        myFiles.open();

    }

</script>

第四步:最后一步,对文件上传非常重要,在ueditor文件夹中找到文件dialogs\attachment\attachment.html中找到代码editor.execCommand("insertHTML",str);在上面添加下面的代码

editor.fireEvent(‘afterUpfile‘, filesList);

然后在<body></body>中随便找个位置放置这个编辑器

<script type="text/plain" id="upload_ue"></script>

说明:可以把两次初始化编辑的代码合并一起放到文件最后的</body>前面,图片上传的配置就不说了,附件中例子已经配置好了,下载下来参考一下就行。转载请标明出处。

源码下载:点击下载

时间: 2024-11-10 11:13:37

百度开源富文本编辑器 UEditor配置:图片上传和文件上传独立使用方法的相关文章

百度的富文本编辑器UEditor添加图片自动加上宽度和高度的属性

若是没有对编辑器做任何配置直接添加图片的话,显示的html内容如下图所示:它会显示出原图片尺寸 所以必须要对图片的初始显示尺寸做控制:ueditor文件中找到image.js文件 在image.js中找到如下图所示: 在此处添加上所要想显示的尺寸! http://ueditor.baidu.com/doc/#COMMAND::insertimage 在image.js中使用的是这个execCommand方法来初始化图片属性的 添加完毕宽度和高度属性后显示如下:

百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明

====================================================================== [百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明] ----by 夏春涛 2014-02-20 ====================================================================== 运行环境: ueditor-v1.3.6-utf8-net,VS2010旗舰版+SP1,

使用百度的富文本编辑器UEditor遇到的问题总结

1.下载地址:http://ueditor.baidu.com/website/download.html(我下载的是.net版本) 下载后要先看一下ueditor.config.js和 net/config.json的文件,里面是关于图片上传和其他方法的一些路径配置 2.显示编辑页面(一定要看使用文档:http://fex.baidu.com/ueditor/#server-deploy) 引入所需的js文件 初始化编辑器    html代码: 1 <div class="form-gr

Django集成百度富文本编辑器uEditor

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. 首先从ueEditor官网下载最新版本的包,目前官网上提供了ASP..NET.PHP.JSP版本的,django版本只有一个第三方个人开发的,但看上出配置起来稍微复杂一点. 这里不介绍uEditor的使用方法,也不过多解释uEditor的配置方法,官网上都有详细的文档和API介绍,下载的Demo中也有常用的方法的示例代码,这里主要介绍uEdi

富文本编辑器-ueditor基本配置

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码..相对于其他流行的富文本编辑器如ckeditor等具有配置简单.更具有中国特色!以下主要是涉及的内容是关于百度富文本编辑器的上传配置以及如何与struts2等结合问题. 1 版本问题 一般而言建议使用UMEditor版本,同时百度web前端开发部也提供了定制版本.如果使用定制版本要注意的一点就是将工具栏的图标添加上分割线!分割线添加的方法如下就

百度UMeditor富文本编辑器java使用

百度UMeditor富文本编辑器java使用 1.介绍 UMeditor 是一款轻量级的富文本编辑器,比UEditor要小得多,是为满足广大门户网站对于简单发帖框,或者回复框需求所定制的在线富文本编辑器 2.下载    官网地址:http://ueditor.baidu.com/website/umeditor.html 说明笔者点击官网的下载中的按钮,半天没反应,然后又去了github上down了一份,github地址:https://github.com/fex-team/umeditor/

MVC富文本编辑器CKEditor配置CKFinder

富文本编辑器CKEditor的使用 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table, pre { margin:

富文本编辑器kindeditor配置

<!--富文本编辑器kindeditor配置↓ --> <link type="text/css" rel="stylesheet" href="kindeditor/themes/default/default.css" /> <link rel="stylesheet" href="kindeditor/plugins/code/prettify.css" /> &l

使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码

富文本编辑器,不多说了,这个大家应该都用到过,至于用到的什么版本,那就分很多种 CKEditor:很早以前叫FCK,那个时候也用过,现在改名了,比较流行的一个插件,国外很多公司在用 UEDITOR:百度开发的插件,lite版是UM EasyUI编辑器:用easyUI的都懂,基本上肯定用到 其他的富文本编辑器就不说了,前两个小编我用的比较多 本来我是比较倾向于CKEditor,但是这个插件不支持图片上传,图片功能只能链接过去,而不能在控件本身中上传,所以就选择了UMeditor 为啥选择UM,不选