上一篇我们介绍了百度ueditor设置字体大小，行高等，本文主要介绍在百度编辑器ueditor中获取内容，其中包括获取整个html内容、获取带有css格式的内容、写入内容、追加内容、获得纯文本内容、获得带有格式的纯文本内容、判断当前编辑器中是否有内容、获得当前选中的内容、插入给定的内容。
1，引入百度ueditor编辑器js库
<!-- 配置文件 V型知识库www.vxzsk.com --> <script type="text/javascript" src="resources/baidu/ueditor/ueditor.config.js"></script> <!-- 编辑器源码文件 --> <script type="text/javascript" src="resources/baidu/ueditor/ueditor.all.js"></script>
以上两个js文件，请读者前往百度开放平台ueditor频道下载。
2，<body></body>之间添加html代码，其中获取内容等功能按钮也一并添加
<!-- 加载编辑器的容器开始 V型知识库www.vxzsk.com --> <div id="container" style="width:500px;height:300px;" name="content" type="text/plain"></div> <!-- 加载编辑器的容器结束--> <br> <div> <button onclick="getAllHtml()">获得整个html的内容</button> <button onclick="getContent()">获得内容</button> <button onclick="setContent()">写入内容</button> <button onclick="setContent(true)">追加内容</button> <button onclick="getContentTxt()">获得纯文本内容</button> <button onclick="getPlainTxt()">获得带格式的纯文本内容</button> <button onclick="hasContent()">判断是否有内容</button> <button onclick="getText()">获得当前选中的文本内容</button> <button onclick="insertHtml()">插入给定的内容</button> </div>
id号为container的div块为百度编辑器容器，剩下的每个button按钮中都有一个onclick触发函数，我们会在接下来的细说。
3，初始化百度编辑器ueditor的js代码
var ue = UE.getEditor('container', {
toolbars: [
['fullscreen', 'source', 'undo', 'redo'],
['fontsize','bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc']
],
initialStyle:'p{line-height:30px;font-size: 20px;}'//设置默认字体大小 行高等
});说明:注意我们把百度编辑器已经初始化为"ue"这个对象，接下来的按钮函数都会用到"ue"这个对象，读者可自行修改这个对象名称。
4，内容button功能按钮的js函数
function getAllHtml() {
alert(ue.getAllHtml());
}
function getContent() {
var arr = [];
arr.push("使用editor.getContent()方法可以获得编辑器的内容");
arr.push("内容为：");
arr.push(ue.getContent());
alert(arr.join("\n"));
}
function setContent(isAppendTo) {
var arr = [];
arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
ue.setContent('欢迎使用ueditor,我们在测试', isAppendTo);
alert(arr.join("\n"));
}
function getContentTxt() {
var arr = [];
arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
arr.push("编辑器的纯文本内容为：");
arr.push(ue.getContentTxt());
alert(arr.join("\n"));
}
function getPlainTxt() {
var arr = [];
arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
arr.push("内容为：");
arr.push(ue.getPlainTxt());
alert(arr.join('\n'));
}
function hasContent() {
var arr = [];
arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
arr.push("判断结果为：");
arr.push(ue.hasContents());
alert(arr.join("\n"));
}
function getText() {
//当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容
var range = UE.getEditor('editor').selection.getRange();
range.select();
var txt = ue.selection.getText();
alert(txt);
}
function insertHtml() {
var value = prompt('插入html代码', '');
ue.execCommand('insertHtml', value);
}以上js函数方法都是每个button按钮对象的onclick函数。
5，button按钮效果
1),获取带有css格式的内容
2),获取纯文本内容效果
接下来的按钮效果请读者自行复制运行点击测试，在这里不在累述提供。
6，完整jsp页面代码
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>百度编辑器ueditor-V型知识库(www.vxzsk.com)</title>
</head>
<body>
<!-- 加载编辑器的容器开始 -->
<div id="container" style="width:500px;height:300px;" name="content" type="text/plain"></div>
<!-- 加载编辑器的容器结束-->
<br>
<div>
<button onclick="getAllHtml()">获得整个html的内容</button>
<button onclick="getContent()">获得内容</button>
<button onclick="setContent()">写入内容</button>
<button onclick="setContent(true)">追加内容</button>
<button onclick="getContentTxt()">获得纯文本内容</button>
<button onclick="getPlainTxt()">获得带格式的纯文本内容</button>
<button onclick="hasContent()">判断是否有内容</button>
<button onclick="getText()">获得当前选中的文本内容</button>
<button onclick="insertHtml()">插入给定的内容</button>
</div>
<!-- 配置文件 -->
<script type="text/javascript" src="resources/baidu/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="resources/baidu/ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue = UE.getEditor('container', {
toolbars: [
['fullscreen', 'source', 'undo', 'redo'],
['fontsize','bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc']
],
initialStyle:'p{line-height:30px;font-size: 20px;}'//设置默认字体大小 行高等
});
function getAllHtml() {
alert(ue.getAllHtml());
}
function getContent() {
var arr = [];
arr.push("使用editor.getContent()方法可以获得编辑器的内容");
arr.push("内容为：");
arr.push(ue.getContent());
alert(arr.join("\n"));
}
function setContent(isAppendTo) {
var arr = [];
arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
ue.setContent('欢迎使用ueditor,我们在测试', isAppendTo);
alert(arr.join("\n"));
}
function getContentTxt() {
var arr = [];
arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
arr.push("编辑器的纯文本内容为：");
arr.push(ue.getContentTxt());
alert(arr.join("\n"));
}
function getPlainTxt() {
var arr = [];
arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
arr.push("内容为：");
arr.push(ue.getPlainTxt());
alert(arr.join('\n'));
}
function hasContent() {
var arr = [];
arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
arr.push("判断结果为：");
arr.push(ue.hasContents());
alert(arr.join("\n"));
}
function getText() {
//当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容
var range = UE.getEditor('editor').selection.getRange();
range.select();
var txt = ue.selection.getText();
alert(txt);
}
function insertHtml() {
var value = prompt('插入html代码', '');
ue.execCommand('insertHtml', value);
}
</script>
</body>
</html>上述代码读者可直接新建一个页面，复制进去，然后替换依赖的百度ueditor依赖的js库，即可运行出上图中的效果
此文章本站原创，地址 https://www.vxzsk.com/169.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程