感谢我的朋友刚子!
以及其他很多的文章的作者!
百度富文本编辑器UMEditor1.2.2是百度2014-03-19日推出的一款Mini版UEditor。
富文本编辑器下载地址如下
点击打开链接
今天弄了一天,最后总结出步骤,供大家参考,有不足和需要注意的地方,请您提出宝贵的意见!
环境:
VS2010,MVC3架构,4.0framework环境
一:下载 百度富文本编辑器UMEditor1.2.2后,将解压的文件夹整个复制在项目中,结构如下(这里我将文件夹名字从“umeditor1_2_2-utf8-net”改成了"umeditor")
二:在Controllers控制器下新增一个控制器 UMEditorController.cs,并在该控制器下,写两个方法,一个用来展示数据,一个用来新增数据
三:在新增数据方法的页面中,照着文档示例添加JS文件和对应的富文本等,这里为了简单,直接给出页面代码
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>AddByUMEditor</title>
<link href="../../umeditor/themes/default/css/umeditor.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script src="../../umeditor/third-party/jquery.min.js" type="text/javascript"></script>
<script src="../../umeditor/umeditor.config.js" type="text/javascript"></script>
<script src="../../umeditor/umeditor.js" type="text/javascript"></script>
<script src="../../umeditor/lang/zh-cn/zh-cn.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var um = UM.getEditor('myEditor');
$("#btnSub").click(function () {
subReMark();
});
});
function subReMark() {
var ReMark = UM.getEditor('myEditor').getContent();
$.ajax({
url: "/UMEditor/AddByUMEditor",
type: "post",
cache: false,
data: { "ReMark": ReMark },
success: function (data) {
alert(data);
}
});
}
</script>
</head>
<body>
<div>
<!--style给定宽度可以影响编辑器的最终宽度-->
<script type="text/plain" id="myEditor" style="width:1000px;height:240px;">
<p>这里我可以写一些输入提示</p>
</script>
</div>
<input type="button" value="提交吧超人" id="btnSub" />
</body>
</html>
后台 AddByUMEditor方法主要代码如下
[HttpPost]//post请求
[ValidateInput(false)]//因为传入的内容包含“<”等数据,所以安全校验不通过,这里要取消安全校验
public ActionResult AddByUMEditor(FormCollection collection)
{
Model.Role role = new Model.Role();
//...此处省略其他字段
//将富文本编辑器中的代码放入ReMark字段
role.ReMark = Request["ReMark"];
//新增数据
_roleBLL.AddEntity(role);
//返回传过来的编辑器中的内容,因为是开发阶段,所以方便看是否是空的等。
return Content(role.ReMark);
}
四:打开项目的Web.config配置文件,在<system.web>节点下添加如下代码以取消安全校验
<system.web>
<httpRuntime requestValidationMode="2.0"/>
五:修改如下图中标记的两个文件的某些小地方,以完成最后的配置工作
1:imageUp.ashx 中主要改文件存放的路径以保证图片文件存放在主目录下
源来的
//上传配置
string pathbase = "upload/";
修改为
//上传配置
string pathbase = "../../upload/";
这样上传的图片文件便可以存放在根目录下,而不是net目录下,反正我跟喜欢这样!
2:右键Uploader.cs文件,选择属性,将 “编译” 改为 “内容”
好了,一切就绪,可以上传图片了!
运行效果图如下:
数据展示页面: