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

javascript富文本编辑器使我们添加、编辑网站中的文章更加方便和容易。这些富文本编辑器提供了所见即所得(What You See Is What You Get - WYSIWYG)的功能,可以像编辑word文档一样,方便地编辑网站中文章,常用于内容管理系统和博客系统等。

百度Ueditor富文本就是其中之一,个人觉得虽然体积大点,不兼容移动端外,其他功能都非常强大,特别是里面的多图上传!

当有些个性化页面需求时,难免会对她一些优化,已让她适合自己的内容,比如单独调用上传图片实现类似于以下页面时

部分代码如下

    var _editor = UE.getEditor(‘Thumb‘);
    _editor.ready(function () {
        //设置编辑器不可用
        //_editor.setDisabled();
        //隐藏编辑器,因为不会用到这个编辑器实例,所以要隐藏
        _editor.hide();
        //侦听图片上传
        _editor.addListener(‘beforeInsertImage‘, function (t, arg) {
            //将地址赋值给相应的input,只去第一张图片的路径
            $(".js_cover_preview").css(‘background-image‘, ‘url(‘ + arg[0].src + ‘)‘);
            //图片预览
            $("#Thumb").val(arg[0].src);
            $(‘.cover_preview_wrp‘).show();
        });
    });
    $(‘.cover_preview_wrp‘).hover(function () {
        $(‘.js_tip_mask‘).show();
    }, function () {
        $(‘.js_tip_mask‘).hide();
    });
    $(‘#js_appmsg_upload_cover‘).click(function () {
        alert(‘123‘);
            var myImage = _editor.getDialog("insertimage");
            myImage.open();
        });

部分参考  http://my.oschina.net/glenxu/blog/476720

时间: 2024-11-09 00:17:12

ueditor单独调用上传附件和图片的功能的相关文章

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使用-图片上传正常,图片显示异常404

做个小项目,用到了ueditor,其中需要在ueditor中上传图片. 问题症状: 点击上传图片的按钮后选择图片,上传到了目的文件夹,但是显示不了,f12查看也是404.后来发觉显示图片时路径不对. 解决方案: 翻看官网文档,找到了个博客:http://popozhu.github.io/2014/07/03/ueditor%E5%9B%BE%E7%89%87%E4%B8%8A%E4%BC%A0%E8%B7%AF%E5%BE%84%E9%85%8D%E7%BD%AE/ 说的还蛮详细.找了下原因,

ueditor百度编辑器中,多图上传后,图片顺序乱掉的处理方法

上传后,图片的顺序和预期的不一致,需要修改ueditor的源码. 一.找到editor/dialogs/attachment/attachment.js文件 1.将_this.fileList.push(json);修改为_this.fileList[$file.index()] = json; 2.考虑上传失败的情况,加上一个判断,避免在上传失败后,数组中出现undefined项 二.找到editor/dialogs/image/image.js文件 1.将_this.imageList.pu

webservice跨服务器上传附件

最近一个项目,用到文件上传功能,本来简单地使用upload控件直接post到服务器保存,简单实现了.后来考虑到分布是部署,静态附件.图片等内容要单独服务器(命名为B服务器,一台,192.168.103.240)存储,则需要分布式服务器(命名为A服务器,可多台,测试程序就是本地 127.0.0.1)上传附件到B服务器. 考虑难易程度和易操作,简单想到的方案是:访问A服务器应用程序调用B服务器的webservice,将附件直接保存到B服务器. 简单实验一下,是可以达成效果的. 步骤一.B服务器的we

Asp.Net 自定义控件实现图片的上传,浏览,删除功能

4月的时候公司比较闲,就想着自己做点东西,其实主要是为了更加熟悉.Net,毕竟接触的时间不长,趁着有时间想提高提高.不过当我做到图片上传这个功能的时候,就有些停滞不前了,连续写了两天也达不到自己想要的标准.后来公司来活,然后就没有然后了,然而做事总不能半途而废吧~时隔一个多月,趁着这个周末,我再次拾起了这个项目,而首要工作就是攻破这个图片上传控件. 下面说说我的标准是什么子的吧~ 1.最多可以上传三张图片,超过三张有提示. 2.点击图片小图,有图片放大功能,再次点击,图片恢复原来尺寸. 3.在图

Asp.Net 自定义控件实现图片的上传,浏览,Delete功能

4月的时候公司比较闲,就想着自己做点东西,其实主要是为了更加熟悉.Net,毕竟接触的时间不长,趁着有时间想提高提高.不过当我做到图片上传这个功能的时候,就有些停滞不前了,连续写了两天也达不到自己想要的标准.后来公司来活,然后就没有然后了,然而做事总不能半途而废吧~时隔一个多月,趁着这个周末,我再次拾起了这个项目,而首要工作就是攻破这个图片上传控件. 下面说说我的标准是什么子的吧~ 1.最多可以上传三张图片,超过三张有提示. 2.点击图片小图,有图片放大功能,再次点击,图片恢复原来尺寸. 3.在图

dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术:HTML5的api,作为一名前端的菜鸟,没什么可说的,直接分享自己学习的资料: 关于HTML5 的这些新的特性大家可以到Mozilla的开发者社区MDN https://developer.mozilla.org/zh-CN/ 上查HTML5的资料 还有就是发掘到的比较牛逼的一篇博客:http:/

html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器

原文:html5 图片上传,支持图片预览.压缩.及进度显示,兼容IE6+及标准浏览器 以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上传组件添加了单独的图片上传UI,支持图片预览和缩放(通过调整图片的大小以实现图片压缩). 上传组件特点 轻量级,不依赖任何JS库,核心代码(Q.Uploader.js)仅约700行,min版本加起来不到12KB 纯

JQuery Uplodify上传附件(同一个页面多个uplodify控件解决方案)

功能描述:实现同一页面中多个不同附件的上传保存,且做到最大程度的减少代码修改量(最大程度的公用),为了方便实现垃圾数据和垃圾文件的处理,项目采用临时文件夹的方式:即:文件自动上传先保存到临时文件夹下,在保存数据之后移动文件到正式目录,页面上对附件的所有操作只有用户点击“保存”后起效.插件名称及版本:Uploadify v3.1.1. 解决方案: 1.引用(页面开头): <link href="~/Scripts/UploadsFile/uploadify.css" rel=&qu