使用UMeditor富文本编辑器上传图片

注:本文系作者原创,但可随意转载。

最近写自己的网站玩儿,写到博客的部分,打算使用UMeditor,因为之前也用过(但是好像没实现图片上传的功能),感觉用起来还比较简单。

不过还是折腾了一下午。。。遇到了很多问题,最麻烦的地方莫过于文档和实际代码不统一,导致文档的可信度大大降低,只能靠自己一步步跟踪调试。

比如,文档中js的配置文件给了两个节点

{
    "imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
    "imageUrlPrefix": "/myapp/ueditor/net/",
}

但是实际下载下来的UMeditor代码的js配置文件中给的节点是,

//图片上传配置区

,imageUrl:URL+"net/imageUp.ashx" //图片上传提交地址
,imagePath:URL + "net/" //图片修正地址,引用了fixedImagePath,如有特殊需求,可自行配置
,imageFieldName:"upfile" //图片数据的key,若此处修改,需要在后台对应文件修改对应参数

问题一、

下载后,直接引用Umeditor,目录结构大致如下图,在ASP.NET MVC4项目中,把整个umeditor文件夹放在Scripts下。编辑博客的页面已经写好了,启动程序,进入编辑页面点击上传图片,进行上传,报错。

说明: 在编译向该请求提供服务所需资源的过程中出现错误。请检查下列特定错误详细信息并适当地修改源代码。

编译器错误消息: CS0433: 类型“Lyosaki.Site.Uploader”同时存在于“c:\Users\LiuYu\AppData\Local\Temp\Temporary ASP.NET Files\root\0d2fa058\84067035\App_Web_uploader.cs.c95a9a5.dyxu9rbj.dll”和“c:\Users\LiuYu\AppData\Local\Temp\Temporary ASP.NET Files\root\0d2fa058\84067035\assembly\dl3\3147e142\84a16ccb_7a2ad101\Lyosaki.Site.DLL”中

解决方案:因为在imageUp.ashx文件头部有一句 <%@ Assembly Src="Uploader.cs" %>, 但给出的是相对路径,系统在默认路径下找到了多个程序集导致编译失败。这里直接把这一句去掉,另外 Uploader.cs没有命名空间,这里加上命名空间Lyosaki.Site,然后直接在imageUp.ashx里边using Lyosaki.Site;即可。

问题二、

在不改变现有目录结构和默认图片上传路径的情况下,图片上传地址形如:~/Scripts/umeditor/net/upload/yyyy-MM-dd/Guid.jpg。

所以,我想优化文件组织结构,改变图片存储位置到~/Upload/yyyy-MM-dd/Guid.jpg。顺便把ashx和cs文件拿出来,放在Scripts文件夹下实在变扭。

这里调试了半天,因为图片上传路径的拼接逻辑实在是混乱,在c#两个文件里有配置,js里也有相关配置,然后c#上传完后还要回调js又传了个路径回去。。。

解决方案:在根目录下新建Ashx文件夹,把两个ashx文件拷过去。在根目录新建Helper文件夹,把Uploader.cs拷贝进去。

在imageUp文件ProcessRequest方法里修改pathbase为,

//上传配置
string pathbase = "/Upload/";。

代表要上传文件到 根目录的Upload文件夹下,但是不能写成"~/Upload",因为这里路径后面会回调到js,js无法解析~。

在umeditor.config.js文件中,将图片上传配置修改为:

//图片上传配置区
, imageUrl: "/Ashx/imageUp.ashx" //图片上传提交地址
, imagePath: "" //图片修正地址,引用了fixedImagePath,如有特殊需求,可自行配置
, imageFieldName: "upfile" //图片数据的key,若此处修改,需要在后台对应文件修改对应参数

问题三、

点击图片上传后,弹窗如图,由于页面较长,可以上下滚动,但此时,整个“图片”弹窗是Fixed的,会随页面滚动。。。但"本地上传","网络图片"这两个pannel,以及中间的小电脑图片和下面那一行文字,确是relative的,滚动到下面,他们不会跟着滚动。。。

导致有几次我滚动到最下面然后点图片上传,却看不到中间的内容,还以为是网络问题没加载出来。。。

解决方案:

在umeditor.css里面加入下面几行样式即可。

.edui-tab-pane {
position: fixed !important;
}

.edui-image-dragTip, .edui-image-upload1 {
left: 50% !important;
position: fixed !important;
}

目前暂时还没有遇到其他问题,但打算在其他地方复用一下它的上传弹窗和后台逻辑,先研究研究能否实现。

时间: 2024-10-14 10:50:09

使用UMeditor富文本编辑器上传图片的相关文章

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

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

BBS(仿博客园系统)项目05(后台管理功能实现:文章添加、富文本编辑器使用、xss攻击、BeautifulSoup4模块、富文本编辑器上传图片、修改头像)

摘要 布局框架搭建 随笔添加 后台管理富文本编辑器KindEditor xss攻击 文章简介的截取,BeautifulSoup4模块 富文本编辑器上传图片 头像修改 一.后台管理框架布局搭建 后台管理布局框架分析:导航条.左侧功能区.右侧主要功能显示和实现区 实现: 导航条:使用bootstrap模板:JavaScript>>导航条 左侧:使用bootstrap模板:组件>>列表组 右侧:使用bootstrap模板:JavaScript>>标签页 新建后台管理路由(注意

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

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

thinkphp 搭配UMeditor富文本编辑器使用

添加编辑器源码到public目录下面: 在界面中配置编辑器: 引入即可在界面显示编辑器: 在图片上传的过程中遇到了一个问题: 他的实例路径是: 而我访问的路径显示的是 www.tp5.com 这是本地测试环境的一个站点域名 ,则显示下列错误, 图片无法显示出来 但是图片已经上传成功. 翻译了下 大概的意思是   编辑器实例的路径是  :http://127.0.0.1/tp5/public/umeditor/ ,那么访问的host域名亦必须和实例的路径是一致的, 访问地址:http://127.

百度 迷你版 UMeditor富文本编辑器 使用方法

第一步:下载编辑器 到官网下载 umeditor 最新版源码版本,下载之后打开 _examples/index.html 就可以看到演示例子.[下载页面] 第二步:部署编辑器到页面 解压下载的包,放到你的项目中. 在你的页面要插入编辑器的位置,插入代码: <!-- 加载编辑器的容器 --> <script id="container" name="content" type="text/plain" style="wi

PHP接入umeditor(百度富文本编辑器)

2015年6月28日 23:08:49 星期日 效果: 开搞;) 首先: 百度官网上下载 umeditor 简版的富文本编辑器(这里) 然后: 解压放到自己的项目中, 配置服务器, 保证能在浏览器端加载到js,css,image... 最后: 准备好上传图片的程序, 我这里是用PHP直接上传到了七牛上 html (在第24~32行, 初始化一些配置, 不用去修改umeditor.config.js了) 1 <!DOCTYPE HTML> 2 <html> 3 <head>

富文本编辑器 - wangEditor 上传图片

效果: . 项目结构图: wangEditor-upload-img.html代码: <html> <head> <title>wangEditor-图片上传</title> <link rel="stylesheet" href="wangEditor/css/wangEditor-1.3.0.min.css"> <style type="text/css"> .wrap{

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

批量上传的图片在线管理没法查看图片 是因为jar包本身的Bug,这里暂时做了个替换展示.就是找到Img.js  然后搜索 img.set 替换下就好了 var url=list[i].url ; url=url.replace("D:/JavaWorkSpace/.metadata/.me_tcat7/webapps/WebEUEdit",""); //img.setAttribute('src', urlPrefix + list[i].url + (list[i

百度富文本编辑器UEditor1.3上传图片附件等

今天一直在整我的一个项目的编辑器上传图片,我用的是百度UEditor 1.3版本的:现在已经有了1.4的了,不过还算比较新吧,但是官网上面没有上传图片这些的教程,而网上对于这方面的资料很少啊,折腾了我半天,看了一些以前版本的上传图片的问题,最后终于搞定了. 先说说我的这个项目的配置情况吧 用的是SSH框架:struts2.3.16 spring3.2.5 hibernate3.3.2 ueditor 1.3-utf-8-jsp版 jdk 1.7 开发工具用的是myeclipse10.7 直接把项