百度ueditor 获取内容(js方法获取)案例(4)

2017年09月07日 08:53 | 5437次浏览 作者原创 版权保护

上一篇我们介绍了百度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   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程