|
|
一般展示型网站或是个人博客之类的网站为了让发表的文章有个性，都需要嵌入HTML、CSS等。这样就需要使用到web富文本编辑器。刚才用百度UMeditor，效果不错。使用上也比较简单。
下载地址：http://ueditor.baidu.com/website/index.html
1、参考Demo就可以实习显示一个富文本编辑器，但是有一个地方被坑了。写出来长点记性。当你自己给富文本编辑器源码加上自己的文件夹后需要修改一个editor_api.js中的一句话（比如你喜欢把所有的JS放在一个Scripts文件夹下）。baseURL = '../Scripts/BaiduUMeditor/_src/'; 这里的baseURL需要换成你的文件夹路径，否则在实例化啊UM的时候会找不到。
2、同样是使用Ajax传给ashx后台并由他处理保存到数据库。默认的情况下后台接受到HTML代码会抛出一个“危险代码”的异常。只需要修改一下web.config配置文件取消验证就可以了
<httpRuntime targetFramework="4.5" requestValidationMode="2.0"/>
<pages validateRequest="false"></pages>
3、代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="SaveHTML.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度富文本编辑器</title>
<link href="Scripts/BaiduUMeditor/themes/default/_css/umeditor.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://c.51hei.com/a/a/b/562571327708.jpg"></script>
<script type="text/javascript" charset="utf-8" src="http://c.51hei.com/a/a/b/5625713243534.jpg"></script>
<script type="text/javascript" charset="utf-8" src="http://c.51hei.com/a/a/b/562571321697.jpg"></script>
<script type="text/javascript" src="http://c.51hei.com/a/a/b/5625713222901.jpg"></script>
<script type="text/javascript">
$(document).ready(function () {
//实例化编辑器
var um = UM.getEditor('myEditor');
});
//按钮的操作
function getContent() {
var arr = [];
arr.push(UM.getEditor('myEditor').getContent());
//alert(arr.join("\n"));
$.ajax({
url: "SaveHTMLHandler.ashx",
type: "POST",
data: { strHTML: arr.join("\n") },
success: function (data) {
alert(data);
},
error: function () {
alert("提示：连接服务器出现异常！");
}
});
}
</script>
</head>
<body>
<h1>UMEDITOR 完整demo</h1>
<div id="btns">
<table>
<tr>
<td>
<button >发表</button>
</td>
</tr>
</table>
</div>
<!--style给定宽度可以影响编辑器的最终宽度-->
<script type="text/plain" id="myEditor" style="width: 1000px; height: 240px;">
</script>
<div>
<h3 id="focush2"></h3>
</div>
</body>
</html>
|
|
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
淘帖
顶
踩
