百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明
======================================================================
【百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明】
----by 夏春涛 2014-02-20
======================================================================
运行环境:
ueditor-v1.3.6-utf8-net,VS2010旗舰版+SP1,ASP.NET MVC3。
将下载后的ueditor压缩包的所有文件拷贝到/Content/ueditor目录中。
1.WEB视图页面中如下配置,运行时应能看到完整的富文本编辑器界面:
<!-- ******************************************************************** -->
<link rel="stylesheet" href="@Url.Content("~/Content/ueditor/themes/default/css/ueditor.min.css")" type="text/css" />
<script src="@Url.Content("~/Content/ueditor/ueditor.config.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/ueditor/ueditor.all.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/ueditor/lang/zh-cn/zh-cn.js")" type="text/javascript"></script>
<!-- ******************************************************************* -->
..
@Html.TextAreaFor(p => p.Content)
..
<script type="text/javascript">
UE.getEditor("Content");//初始化富文本编辑器
</script>
2.修改ueditor.config.js内容,在函数第一行增加ueditor目录路径配置,该路径是相对于网站根目录的,
如是http://www.xxx.com/Content/ueditor/ 则为 /Content/ueditor/。
配置好后插入图片等操作的对话框显示样式会变得正常。
window.UEDITOR_HOME_URL = "/Content/ueditor/";
3.根据需要修改ueditor.config.js内容,以下列举了一些常用项:
, initialFrameWidth: 760 //编辑器宽度
, initialFrameHeight: 400 //编辑器高度
, wordCount: false //编辑器下方显示控制:不让编辑器统计字数
, elementPathEnabled: false //编辑器下方显示控制:不显示元素路径
, autoHeightEnabled: false //不让编辑自动长高(这样,当内容较多时会出现上下滚动条,而不至于把网页撑大)
4.解决“检测到有潜在危险的 Request.Form 值”的问题。
错误提示:
从客户端(Content="<p><span style="colo...")中检测到有潜在危险的 Request.Form 值。
原因说明:
因为富文本编辑器产生的内容中会包含<>"等特殊字符,服务器默认进行内容安全检测并阻止代码运行。
解决办法:
为Action添加属性:[ValidateInput(false)],示例:
[HttpPost]
[ValidateInput(false)] //不进行内容检测
public ActionResult NewsEdit(News newsModel)
{
//...
}
5.★解决文件不能上传的问题。
错误提示:
Url: http://localhost:11685/Content/ueditor/net/fileUp.ashx
Description: e:\我们的项目\BetterMIS\project\BetterMIS.WebViews\Content\ueditor\net\fileUp.ashx(34): error CS0433:
类型“Uploader”同时存在于“c:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files\root\98d019ee\65f02c2e\App_Web_uploader.cs.d026ad6.qqgskfar.dll”
和“c:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files\root\98d019ee\65f02c2e\assembly\dl3\a6a5387f\ee12af20_0d2ecf01\BetterMIS.WebViews.DLL”中。
解决办法:
ueditor的net文件夹下的Uploader.cs文件的生成操作属性默认是“编译”,只需要将这个文件的生成操作属性改为“内容”,
上传图片的功能就可以正常成功使用了![源自:http://www.cnblogs.com/beyond1983/archive/2013/02/26/2933744.html]
原因剖析:
因为Ueditor的示例是针对Asp.net网站(不是MVC),不需要编译成DLL,直接把示例放到IIS下就可以使用啦。
6.★解决上传图片时总提示“选择保存目录:正在读取目录...”的问题。
问题现象补充:如果选择本地图片后,点击“开始上传”总是提示“请等待保存目录就绪”。
错误提示:
Url: http://localhost:11685/Content/ueditor/net/imageUp.ashx?fetch=1
Description: e:\我们的项目\BetterMIS\project\BetterMIS.WebViews\Content\ueditor\net\imageUp.ashx(18): error CS0433:
类型“Config”同时存在于“c:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files\root\98d019ee\65f02c2e\App_Web_config.cs.d026ad6.storkrj4.dll”
和“c:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files\root\98d019ee\65f02c2e\assembly\dl3\a6a5387f\02a91fba_162ecf01\BetterMIS.WebViews.DLL”中。
解决办法(原因同上):
ueditor的net文件夹下的Config.cs文件的生成操作属性默认是“编译”,只需要将这个文件的生成操作属性改为“内容”。
7.★解决无法正常显示刚刚上传的图片的问题。
问题现象:
成功上传一张图片,插入到编辑器中,但是无法正确显示刚刚上传的图片。
原因剖析:
查看html源码可以发现图片路径中,upload1后面有2个/,手动删除一个后,返回查看,图片可以正常显示了。
解决办法1:
在imageUp.ashx文件中找到代码:
info = up.upFile(context, path + '/', filetype, size);
把把+'/'给删除掉,即:
info = up.upFile(context, path, filetype, size);
解决办法2:
在Uploader.cs文件中找到代码(在upFile函数中):
pathbase = pathbase + "/";
修改为:
pathbase = pathbase.TrimEnd('/') + "/";
这样,可以彻底解决类似问题,因为ueditor的上传功能都是调用Uploader类实现的。
8.修改上传文件的路径:
(1)图片上传路径。修改Config.cs文件:
将
public static string[] ImageSavePath = new string[] { "upload1", "upload2", "upload3" };//即ueditor/net/upload1等目录
改为:
public static string[] ImageSavePath = new string[] { "upload/image" };//即图片上传到ueditor/net/upload/image目录中
另,对于【图片搜索】中的图片保存路径。修改getRemoteImage.ashx文件:
将
string savePath = "upload/";
改为:
string savePath = "upload/image/"; //即图片保存到ueditor/net/upload/image目录中
补充说明:对于【图片搜索】中的图片保存,系统会自动在savePath目录下再以日期为名创建文件夹来保存文件。
(2)附件(及视频文件)上传路径。修改fileUp.ashx文件:
将
String pathbase = "upload/";
改为:
String pathbase = "upload/file";//即附件上传到ueditor/net/upload/file目录中
(3)涂鸦上传路径。修改scrawUp.ashx文件:
一是将
string pathbase = "tmp/";
改为:
string pathbase = "upload/tmp/";
二是将
string pathbase = "upload/";
string tmpPath = "tmp/";
改为:
string pathbase = "upload/scraw/";
string tmpPath = "upload/tmp/";
补充说明:系统会自动在pathbase目录下再以日期为名创建文件夹来保存文件。
9.注意将upload目录的访问权限放开(右键文件夹->属性->安全->编辑,即可设置),允许everyone用户完全控制(当然安全一点应该只允许IIS_WPG账户完全控制即可)。
======================================================================
----by 夏春涛 20140220
======================================================================
百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明的更多相关文章
- 使用百度的富文本编辑器UEditor遇到的问题总结
1.下载地址:http://ueditor.baidu.com/website/download.html(我下载的是.net版本) 下载后要先看一下ueditor.config.js和 net/co ...
- 百度开源富文本编辑器 UEditor配置:图片上传和文件上传独立使用方法
使用UEditor编辑器自带的插件实现图片上传和文件上传功能,这里通过配置UEditor单独使用其内置的第三方插件swfupload来实现图片和文件的上传,通过对UEditor配置轻松实现图片批量上传 ...
- 百度的富文本编辑器UEditor批量添加图片自动加上宽度和高度的属性
若是没有对编辑器做任何配置直接添加图片的话,显示的html内容如下图所示:它会显示出原图片尺寸 所以必须要对图片的初始显示尺寸做控制:ueditor文件中找到image.js文件 在image.js中 ...
- 百度的富文本编辑器UEDITOR
还是百度的ueditor 比较好用,文件导入后,基本不用配置就可以直接使用图片,文件上传等功能. CKeditor要注意的地方太多了 .但是相对ckeditor 样式比较好看.
- 百度富文本编辑器ueditor使用总结
最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结 相关详细操作链接地址: http://blog.csdn.net/wusuopubupt/arti ...
- springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑)
springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑) 写在前面: 富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一 ...
- 百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式 你可以去百度UEditor ...
- 百度富文本编辑器ueditor使用启示
百度富文本编辑器ueditor使用启示 一.总结 一句话总结:使用工具,多去看官方demo,非常详细. 二.百度富文本编辑器ueditor使用启示 官方完整demo 官方完整demo对应的源代码 &l ...
- thinkphp5.1中适配百度富文本编辑器ueditor
百度富文本编辑器ueditor虽然很老,但是功能齐全,我近期需要能批量粘贴图片的功能,但是找不到,很无奈.然后现在就分享一下如何把ueditor适配到thinkphp5.1,有知道如何批量上传图片的艾 ...
随机推荐
- 网页中插入swf动画(embed)
网页中插入swf动画(embed:[ɪm'bed]) 例题: <embed src="swf.sef" width="200" height=" ...
- SP_APPROVALSET_OVERTIME 插入單據
CREATE OR REPLACE PROCEDURE SP_APPROVALSET_OVERTIME(VAPPLY_NO varchar2,VAPPLYKIND_NO varchar2,VFAC_N ...
- linux-8 基本命令---echo
1.echo 命令用于终端显示字符或变量 格式:“echo[字符串| 变量]” @1 .echo命令的字符串输出到终端: @2 .echo查看当前SHELL的变量值(前面有$符号): @3 .查看 ...
- Asp.net中HttpRequest.Params与Reques.Item之异同
今天才注意到HttpRequest.Params与HttpRequest.Item这两个玩意竟然有微妙的不同.上午的时候同事被坑了发现这玩意的说明还真微妙. 场景再现: 前台提交一个POST请求到后台 ...
- Linux启动ftp服务器530 Permission denied解决方法(已试,行)
Linux启动ftp服务器530 Permission denied解决方法重新在虚拟机下安装了linux.现在我想启动linux自带的ftp服务器:#service vsftpd start . ...
- Dynamic CRM 2013学习笔记(十七)JS读写各种类型字段方法及技巧
我们经常要对表单里各种类型的字段进行读取或赋值,下面列出各种类型的读写方法及注意事项: 1. lookup 类型 清空值 var state = Xrm.Page.getAttribute(" ...
- 单元测试 Mocking 类库需具备的特性
一个优秀的单元测试 Mocking 类库,需要具备如下几个特性: 易用性:有非常明确的 API ,易于使用并易于记忆. 健壮性:行为结果始终一致,并保持准确. 帮助性:当程序出错时,给出尽可能明确的原 ...
- Xperf Basics: Recording a Trace (the easy way)(转)
http://randomascii.wordpress.com/2013/04/20/xperf-basics-recording-a-trace-the-easy-way/ Some ti ...
- easyui使用技巧
1.自定义datagrid字体大小 通过formatter改变字体大小,然后在列中使用: 如下: function formatFontSize(value){ return'<span sty ...
- 旋转V字俄罗斯方块
实现效果如图,也就是一个图像的旋转.注意,旋转后的文字是相对应的,而且文字还是立起的.第一次点击时显示,第二次点击时开始旋转.下面是我做这个效果的记录,方法这么差,我也就不说什么了. 先上HTML/C ...