|
|
一般展示型網(wǎng)站或是個(gè)人博客之類的網(wǎng)站為了讓發(fā)表的文章有個(gè)性，都需要嵌入HTML、CSS等。這樣就需要使用到web富文本編輯器。剛才用百度UMeditor，效果不錯(cuò)。使用上也比較簡(jiǎn)單。
下載地址：http://ueditor.baidu.com/website/index.html
1、參考Demo就可以實(shí)習(xí)顯示一個(gè)富文本編輯器，但是有一個(gè)地方被坑了。寫出來長(zhǎng)點(diǎn)記性。當(dāng)你自己給富文本編輯器源碼加上自己的文件夾后需要修改一個(gè)editor_api.js中的一句話（比如你喜歡把所有的JS放在一個(gè)Scripts文件夾下）。baseURL = '../Scripts/BaiduUMeditor/_src/'; 這里的baseURL需要換成你的文件夾路徑，否則在實(shí)例化啊UM的時(shí)候會(huì)找不到。
2、同樣是使用Ajax傳給ashx后臺(tái)并由他處理保存到數(shù)據(jù)庫(kù)。默認(rèn)的情況下后臺(tái)接受到HTML代碼會(huì)拋出一個(gè)“危險(xiǎn)代碼”的異常。只需要修改一下web.config配置文件取消驗(yàn)證就可以了
<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 () {
//實(shí)例化編輯器
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空間
騰訊微博
騰訊朋友
收藏
淘帖
頂
踩
