使用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;
}
目前暂时还没有遇到其他问题,但打算在其他地方复用一下它的上传弹窗和后台逻辑,先研究研究能否实现。
使用UMeditor富文本编辑器上传图片的更多相关文章
- 富文本编辑器上传图片需要配置js,后台代码
富文本编辑器上传图片需要配置js,后台代码
- 百度umeditor富文本编辑器插件扩展
富文本编辑器在WEB开发中经常用到,个人比较喜欢用百度出的ueditor这款,ueditor这款本身支持插件扩展的,但是ueditor的mini版本 umeditor 就没有那么方便了,不过找了很多资 ...
- 使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码
富文本编辑器,不多说了,这个大家应该都用到过,至于用到的什么版本,那就分很多种 CKEditor:很早以前叫FCK,那个时候也用过,现在改名了,比较流行的一个插件,国外很多公司在用 UEDITOR:百 ...
- JSP嵌入ueditor、umeditor富文本编辑器
一.下载: 1.什么是富文本编辑器?就是: 或者是这个: 其中第一个功能比较详尽,其主要用来编写文章,名字叫做udeitor. 第二个就相对精简,是第一个的MINI版,其主要用来编辑即时聊天或者发帖, ...
- vue问题四:富文本编辑器上传图片
vue使用富文本编辑器上传图片: 我是用的是wangEditor 富文本编辑器 demo:http://www.wangeditor.com/ 1).安装依赖:npm install wangedit ...
- ueditor富文本编辑器——上传图片按钮卡顿,响应慢
最近负责将公司官网从静态网站改版成动态网站,方便公司推广营销人员修改增加文案,避免官网文案维护过于依赖技术人员.在做后台管理系统时用到了富文本编辑器Ueditor,因为公司有一个阿里云文件资源服务器, ...
- Ueditor富文本编辑器--上传图片自定义上传操作
最近负责将公司官网从静态网站改版成动态网站,方便公司推广营销人员修改增加文案,避免官网文案维护过于依赖技术人员.在做后台管理系统时用到了富文本编辑器Ueditor,因为公司有一个阿里云文件资源服务器, ...
- 百度 迷你版 UMeditor富文本编辑器 使用方法
第一步:下载编辑器 到官网下载 umeditor 最新版源码版本,下载之后打开 _examples/index.html 就可以看到演示例子.[下载页面] 第二步:部署编辑器到页面 解压下载的包,放到 ...
- ueditor富文本编辑器跨域上传图片解决办法
在使用百度富文本编辑器上传图片的过程中,如果是有一台单独的图片服务器就需要将上传的图片放到图片服务器,比如在a.com的编辑器中上传图片,图片要保存到img.com,这就涉及到跨域上传图片,而在ued ...
随机推荐
- ubuntu配置机器学习环境(三) opencv 安装
这里使用脚本安装 一些教程里使用cmake 安装,很容易出错的 使用github上的安装脚本,自动化安装 参考链接 Ubuntu $ cd Ubuntu/2.4 $ chmod +x * # 如果要安 ...
- xss挑战赛小记 0x02(prompt(1))
0x0O 上次搜xss挑战赛的时候 还找到了一个看上去难度更高的挑战赛 今天做了一下 学到了很多新东西 这个挑战赛能够在页面成功prompt(1)就算过关了 挑战地址 http://prompt.ml ...
- Android log 里面快速搜索错误堆栈 ( 关键字)
有时候,别人给你的log 文件,是一个文件夹,里面放了很多文件.但是可能你需要的log 只有几行.这时候不可能手工搜索的. 那怎么办呢?使用FileLocationPro.下载地址: https:// ...
- Mysql数据库的压力
rationalError: (2006, 'MySQL server has gone away') 2017年10月10日 20:04:43 阅读数:377 问题描述 使用django+celer ...
- Java之枚举笔记(Enum)
package com.simope.ljm; public class MyEnum { public static void main(String[] args) { System.out.pr ...
- 30分钟快速搭建Web CRUD的管理平台--django神奇魔法
加上你的准备的时间,估计30分钟完全够用了,因为最近在做爬虫管理平台,想着快速开发,没想到python web平台下有这么非常方便的框架,简洁而优雅.将自己的一些坑总结出来,方便给大家的使用. 准备环 ...
- 孤荷凌寒自学python第七十五天开始写Python的第一个爬虫5
孤荷凌寒自学python第七十五天开始写Python的第一个爬虫5 (完整学习过程屏幕记录视频地址在文末) 今天在上一天的基础上继续完成对我的第一个代码程序的书写. 直接上代码.详细过程见文末屏幕录像 ...
- 问题 A: 分数矩阵
题目描述 我们定义如下矩阵:1/1 1/2 1/31/2 1/1 1/21/3 1/2 1/1矩阵对角线上的元素始终是1/1,对角线两边分数的分母逐个递增.请求出这个矩阵的总和. 输入 输入包含多组测 ...
- 数论3——gcd&&lcm
gcd(a, b),就是求a和b的最大公约数 lcm(a, b),就是求a和b的最小公倍数 然后有个公式 a*b = gcd * lcm ( gcd就是gcd(a, b), ( •̀∀•́ ) ...
- JMS实战——ActiveMQ实现Pub-Sub
前言 上篇博客<JMS实战--ActiveMQ>介绍了ActiveMQ的安装,并实现了简单的PTP模型.这篇博客我们来看一下Pub-Sub模型,之后来总结一下JMS. 实现 项目结构 其中 ...