ueditor文本编辑器的使用

时间:2021-10-13 02:32:34

1,头部引用

<link href="ueditor/themes/default/css/ueditor.css" rel="stylesheet" type="text/css" />

   <script src="ueditor/ueditor.config.js" type="text/javascript"></script>

  <script src="ueditor/ueditor.all.js" type="text/javascript"></script>

2,页面设个textarea和一个input hidden(隐藏域保存txtarea的数据,用于获取C#服务端获取)

<textarea id="txtTContent" tip="内容" ></textarea>

<input id="hidTContent" name="hidTContent" type="hidden" />

3,书写脚本

<script type="text/javascript">

function GetTextValue() {

try {

var count = $("#txtTTopic").val().length;

if (count == 0) {

alert('标题不能为空');

return false;

}

var oTxt = editor.getContent();

if (oTxt.length <= 0) {

alert('内容不能为空');

return false;

}

$("#hidTContent").val(htmlEncode(oTxt));

return true;

}

catch (err) {

alert(err);

return false;

}

}

function htmlEncode(value) {

if (value) {

return jQuery('<div />').text(value).html();

} else {

return '';

}

}

</script>

<script language="javascript" type="text/javascript">    // UEditor

var option = {

initialContent: '', //初始化编辑器的内容

initialFrameWidth: 602,

initialFrameHeight: 312, //设置高度

textarea: 'editorValue' //设置提交时编辑器内容的名字,之前我们用的名字是默认的editorValue

};

var editor = new baidu.editor.ui.Editor(option); //将设置初始化(之前的配置采用的是默认的,所以没有传参数)

editor.render("txtTContent");

</script>

4,后台获取

string str = Server.HtmlDecode(Request.Form["hidTContent"]);

5,其它特性

BBS回复引用

<a href="javascript:scroll(0,5000)" onclick="Reply('<%# Container.ItemIndex + CurPageItemIndex +1 %>','<%#Eval("Col_ReplyUser")%>','<%# FilterHtml.CutStrBySeparate(Eval("RContent").ToString(), 80)%>')">回复</a>

<script type="text/javascript">

function Reply(layer, user, content) {

//editor.setContent('');

var html = '<h4 style="font-size:12px; font-weight:normal; width:758px; line-height:22px; padding: 0 5px; color:#aaa; border:1px solid #ccc; overflow:hidden;">&nbsp;&nbsp;引用 ';

html += user + '(' + layer + '楼)&nbsp;&nbsp;';

html += content;

html += '<h4></h4><h4></h4>';

html += '<br/>';

editor.setContent(html,false);

editor.focus();

}

</script>