很好用的百度ueditor1_2_3_0_utf8_net富文本框,功能强大
2013-07-01 15:35
302 查看
Uedit下载地址:http://ueditor.baidu.com/website/
//Head部分代码如下
//*************************************************************************************
<script type="text/javascript">
//注意此处:富文本控件在项目中的相对路径
window.UEDITOR_HOME_URL = "../ueditor1_2_3_0_utf8_net/"; //editor_all.js 里需要用到的地址名
</script>
<script type="text/javascript" charset="utf-8" src="../ueditor1_2_3_0_utf8_net/editor_config.js"></script>
<script type="text/javascript" charset="utf-8" src="../ueditor1_2_3_0_utf8_net/_examples/editor_api.js"></script>
//*************************************************************************************
//Body部分代码如下
//*************************************************************************************
<textarea id="txteditor" name="txteditor" runat="server" cols="30" rows="10" style=" margin-left:140px;width:1000px;">
<p>请输入内容介绍</p>
</textarea>
<script language="javascript" type="text/javascript">
var editor = new baidu.editor.ui.Editor();
editor.render("txteditor");
</script>
//*************************************************************************************
//body 后面的脚本(此部分代码可省略)
//*************************************************************************************
<script type="text/javascript">
ue.addListener("selectionchange", function () {
var state = ue.queryCommandState("source");
var btndiv = document.getElementById("btns");
if (btndiv && state == -1) {
disableBtn("enable");
}
});
function getContent() {
$("#txtHTMLContent").html(ue.getContent());
alert($("#txtHTMLContent").val());
}
function setEnabled() {
ue.setEnabled();
enableBtn();
}
function getText() {
//当你点击按钮时编辑区域已经失去了焦点,如果直接用getText将不会得到内容,所以要在选回来,然后取得内容
var range = ue.selection.getRange();
range.select();
var txt = ue.selection.getText();
alert(txt)
}
function getContentTxt() {
var arr = [];
arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
arr.push("编辑器的纯文本内容为:");
arr.push(ue.getContentTxt());
alert(arr.join("\n"));
}
function hasContent() {
var arr = [];
arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
arr.push("判断结果为:");
arr.push(ue.hasContents());
alert(arr.join("\n"));
}
function setFocus() {
ue.focus();
}
function deleteEditor() {
disableBtn();
ue.destroy();
}
function disableBtn(str) {
var div = document.getElementById('btns');
var btns = domUtils.getElementsByTagName(div, "input");
for (var i = 0, btn; btn = btns[i++]; ) {
if (btn.id == str) {
domUtils.removeAttributes(btn, ["disabled"]);
} else {
btn.setAttribute("disabled", "true");
}
}
}
function enableBtn() {
var div = document.getElementById('btns');
var btns = domUtils.getElementsByTagName(div, "input");
for (var i = 0, btn; btn = btns[i++]; ) {
domUtils.removeAttributes(btn, ["disabled"]);
}
}
</script>
</html>
后台就可以直接获得文本内容了:通过:Server.HtmlEncode(txteditor.Value);
//Head部分代码如下
//*************************************************************************************
<script type="text/javascript">
//注意此处:富文本控件在项目中的相对路径
window.UEDITOR_HOME_URL = "../ueditor1_2_3_0_utf8_net/"; //editor_all.js 里需要用到的地址名
</script>
<script type="text/javascript" charset="utf-8" src="../ueditor1_2_3_0_utf8_net/editor_config.js"></script>
<script type="text/javascript" charset="utf-8" src="../ueditor1_2_3_0_utf8_net/_examples/editor_api.js"></script>
//*************************************************************************************
//Body部分代码如下
//*************************************************************************************
<textarea id="txteditor" name="txteditor" runat="server" cols="30" rows="10" style=" margin-left:140px;width:1000px;">
<p>请输入内容介绍</p>
</textarea>
<script language="javascript" type="text/javascript">
var editor = new baidu.editor.ui.Editor();
editor.render("txteditor");
</script>
//*************************************************************************************
//body 后面的脚本(此部分代码可省略)
//*************************************************************************************
<script type="text/javascript">
ue.addListener("selectionchange", function () {
var state = ue.queryCommandState("source");
var btndiv = document.getElementById("btns");
if (btndiv && state == -1) {
disableBtn("enable");
}
});
function getContent() {
$("#txtHTMLContent").html(ue.getContent());
alert($("#txtHTMLContent").val());
}
function setEnabled() {
ue.setEnabled();
enableBtn();
}
function getText() {
//当你点击按钮时编辑区域已经失去了焦点,如果直接用getText将不会得到内容,所以要在选回来,然后取得内容
var range = ue.selection.getRange();
range.select();
var txt = ue.selection.getText();
alert(txt)
}
function getContentTxt() {
var arr = [];
arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
arr.push("编辑器的纯文本内容为:");
arr.push(ue.getContentTxt());
alert(arr.join("\n"));
}
function hasContent() {
var arr = [];
arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
arr.push("判断结果为:");
arr.push(ue.hasContents());
alert(arr.join("\n"));
}
function setFocus() {
ue.focus();
}
function deleteEditor() {
disableBtn();
ue.destroy();
}
function disableBtn(str) {
var div = document.getElementById('btns');
var btns = domUtils.getElementsByTagName(div, "input");
for (var i = 0, btn; btn = btns[i++]; ) {
if (btn.id == str) {
domUtils.removeAttributes(btn, ["disabled"]);
} else {
btn.setAttribute("disabled", "true");
}
}
}
function enableBtn() {
var div = document.getElementById('btns');
var btns = domUtils.getElementsByTagName(div, "input");
for (var i = 0, btn; btn = btns[i++]; ) {
domUtils.removeAttributes(btn, ["disabled"]);
}
}
</script>
</html>
后台就可以直接获得文本内容了:通过:Server.HtmlEncode(txteditor.Value);
相关文章推荐
- .NET下为百度文本编辑器UEditor增加图片删除功能
- 百度UEditor编辑器关闭抓取远程图片功能(默认开启)
- 百度UEditor编辑器关闭抓取远程图片功能(默认开启)
- 改造百度UMeditor(UEditor-min)富文本编辑器的图片上传功能
- Tp3.2.3 整合 百度Ueditor1.4.3.3 图片上传功能
- ueditor1_4_3-utf8-jsp 配置实现上传图片的功能
- 百度UEditor调用单图片上传功能的解决方法
- 删除百度Ueditor编辑器 在线管理 图片搜索 功能
- 百度编辑器 ueditor1.1.8.1 For Asp.net 配置 上传功能详解
- 为百度文本编辑器UEditor添加附件管理功能
- EL表达式中fn函数的强大功能,很简单,很好用,很强大
- 百度Ueditor uParse功能Bug,生成全局CSS: li,影响全局样式, 造成网页其它部分显示混乱解决方案
- ueditor1_4_3-utf8-jsp 配置实现上传图片的功能遇到的问题,改变图片上传请求地址
- 为百度文本编辑器UEditor添加附件管理功能
- java jsp 整合百度文本编辑器ueditor1_4_3-utf8-jsp 遇到的问题
- 百度UEditor编辑器如何关闭抓取远程图片功能
- datagrid 属性 获取数据列表启用分页 搜索功能 很好很强大
- 百度UEditor编辑器关闭抓取远程图片功能(默认开启)
- .NET下为百度文本编辑器UEditor增加图片删除功能示例