|
|
一般展示型網(wǎng)站或是個人博客之類的網(wǎng)站為了讓發(fā)表的文章有個性，都需要嵌入HTML、CSS等。這樣就需要使用到web富文本編輯器。剛才用百度UMeditor，效果不錯。使用上也比較簡單。
下載地址：http://ueditor.baidu.com/website/index.html
1、參考Demo就可以實習(xí)顯示一個富文本編輯器，但是有一個地方被坑了。寫出來長點記性。當(dāng)你自己給富文本編輯器源碼加上自己的文件夾后需要修改一個editor_api.js中的一句話（比如你喜歡把所有的JS放在一個Scripts文件夾下）。baseURL = '../Scripts/BaiduUMeditor/_src/'; 這里的baseURL需要換成你的文件夾路徑，否則在實例化啊UM的時候會找不到。
2、同樣是使用Ajax傳給ashx后臺并由他處理保存到數(shù)據(jù)庫。默認的情況下后臺接受到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("提示：連接服務(wù)器出現(xiàn)異常！");
}
});
}
</script>
</head>
<body>
<h1>UMEDITOR 完整demo</h1>
<div id="btns">
<table>
<tr>
<td>
<button >發(fā)表</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空間
騰訊微博
騰訊朋友
收藏
淘帖
頂
踩
