百度富文本编辑器

最新推荐文章于 2025-06-08 15:49:33 发布

原创最新推荐文章于 2025-06-08 15:49:33 发布 · 688 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#百度富文本编辑器 #jsp

java-web 专栏收录该内容

34 篇文章

订阅专栏

本文介绍如何使用百度富文本编辑器UEditor，包括基本的安装步骤、配置方法及常见API操作示例，帮助开发者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

百度富文本编辑器简单使用示例:

说明:
需要下载相关插件包
ueditor 官方地址：http://ueditor.baidu.com/website/index.html
开发文档地址：http://ueditor.baidu.com/website/document.html
下载地址：http://ueditor.baidu.com/website/download.html （这里可选开发版，或MINI版）

从官网上下载完整源码包，解压到任意目录，导入到你的eclipse中,最终结构如下:

这些jar包在ueditor/jsp/lib下,把它们拿出来放到lib下,自动装载

以下是我整理的jsp代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>百度富文本编辑器</title>

<style type="text/css">
    button{
        width: 180px;
        text-align: center;
        height: 30px;
    }
    input{
        width: 180px;
        text-align: center;
        height: 30px;
    }
</style>
</head>
<script type="text/javascript" src="ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8"
    src="ueditor/lang/zh-cn/zh-cn.js"></script>
<body>
    <script id="editor" name="editor" type="text/plain" style="height:480px">
        hello , my loader
    </script>
    <script type="text/javascript">
        var ue = UE.getEditor('editor', {
            autoHeight : false
        });
        //获取整个html的内容
        function getHtmlContent() {
            ue.ready(function() {
                //获取html内容
                var html = ue.getContent();
                alert(html);
            });
        }
        //获取纯文本
        function getTextContent() {
            ue.ready(function() {
                //获取纯文本内容，返回: hello
                var txt = ue.getContentTxt();
                alert(txt);
            });
        }
        //插入内容
        function addText() {
            ue.ready(function() {
                var ctx = prompt();
                ue.setContent(ctx);
            });
        }
        //追加内容
        function appendText() {
            ue.ready(function() {
                var ctx = prompt();
                ue.setContent(ctx);
            });
        }
        //是否拥有焦点
        function isFocus(e) {
            alert(UE.getEditor('editor').isFocus());
            UE.dom.domUtils.preventDefault(e);
        }
    </script>
    <br /> 常用API
    <br />
    <hr />
    <input id="bt0" type="button" value="zh-cn" onclick="setLanguage(this)">
    <input id="bt0" type="button" value="en" onclick="setLanguage(this)">
    <!-- <input id="bt1" type="button" value="获取整个html的内容"
        onclick="getHtmlContent()">
    <input id="bt2" type="button" value="获取纯文本" onclick="getTextContent()">
    <input id="bt3" type="button" value="插入内容" onclick="addText()"> -->
    <br />
    <hr />
    <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>
    <br/><br/>
    <button onclick="hasContent()">判断是否有内容</button>
    <button onclick="setFocus()">使编辑器获得焦点</button>
    <button onclick="getText()">获得当前选中的文本</button>
    <button onclick="insertHtml()">插入给定的内容</button>
    <button id="enable" onclick="setEnabled()">可以编辑</button>
    <button onclick="setDisabled()">不可编辑</button>
    <br/><br/>
    <button onclick="UE.getEditor('editor').setHide()">隐藏编辑器</button>
    <button onclick="UE.getEditor('editor').setShow()">显示编辑器</button>
    <button onclick="UE.getEditor('editor').setHeight(300)">设置编辑器的高度为300</button>
    <button type="button" onclick="createEditor()">创建编辑器</button>
    <button type="button" onclick="deleteEditor()">删除编辑器</button>
    <button onmousedown="isFocus(event)">编辑器是否获得焦点</button>
    <br/><br/>
    <button onmousedown="setblur(event)">编辑器失去焦点</button>
    <button onclick="getLocalData()">获取草稿箱内容</button>
    <button onclick="clearLocalData()">清空草稿箱</button>
    <script type="text/javascript">
        var domUtils = UE.dom.domUtils;
        var ServerUrl = '/server/ueditor/';
        var options = {
            //图片上传配置区
            serverUrl : ServerUrl + "controller.php",
            imageUrl : ServerUrl + "imageUp.php" //图片上传提交地址     ,
            imagePath : ServerUrl //图片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置
            //涂鸦图片配置区
            ,
            scrawlUrl : ServerUrl + "scrawlUp.php" //涂鸦上传地址
            ,
            scrawlPath : ServerUrl + "" //图片修正地址，同imagePath

            //附件上传配置区
            ,
            fileUrl : ServerUrl + "fileUp.php" //附件上传提交地址
            ,
            filePath : ServerUrl //附件修正地址，同imagePath
            ,
            catchRemoteImageEnable : false
            // ,catcherUrl:ServerUrl +"getRemoteImage.php"   //处理远程图片抓取的地址
            // ,catcherPath:ServerUrl                  //图片修正地址，同imagePath
            ,
            imageManagerUrl : ServerUrl + "imageManager.php" //图片在线管理的处理地址
            ,
            imageManagerPath : ServerUrl //图片修正地址，同imagePath
            ,
            snapscreenHost : location.hostname //屏幕截图的server端文件所在的网站地址或者ip，请不要加http://
            ,
            snapscreenServerUrl : ServerUrl + "imageUp.php" //屏幕截图的server端保存程序，UEditor的范例代码为“ServerUrl +"server/upload/snapImgUp.php"”
            ,
            snapscreenPath : ServerUrl,
            snapscreenServerPort : location.port //屏幕截图的server端端口
            ,
            wordImageUrl : ServerUrl + "imageUp.php" //word转存提交地址
            ,
            wordImagePath : ServerUrl //
            ,
            getMovieUrl : ServerUrl + "getMovie.php" //视频数据获取地址
            ,
            videoUrl : ServerUrl + "fileUp.php" //附件上传提交地址
            ,
            videoPath : ServerUrl, //附件修正地址，同imagePath

            lang : /^zh/.test(navigator.language || navigator.browserLanguage
                    || navigator.userLanguage) ? 'zh-cn' : 'en',
            langPath : UEDITOR_HOME_URL + "lang/",
            disabledTableInTable : false,
            webAppKey : "9HrmGf2ul4mlyK8ktO2Ziayd",
            initialFrameWidth : 860,
            initialFrameHeight : 400,
            focus : true,
            shortcutMenu : [ "fontfamily", "fontsize", "bold", "italic",
                    "underline", "forecolor", "backcolor", "insertorderedlist",
                    "insertunorderedlist" ]
        };
        function setLanguage(obj) {
            var value = obj.value, opt = {
                lang : value
            };
            UE.utils.extend(opt, options, true);
            UE.delEditor("editor");
            //清空语言
            if (!UE._bak_I18N) {
                UE._bak_I18N = UE.I18N;
            }
            UE.I18N = {};
            UE.I18N[opt.lang] = UE._bak_I18N[opt.lang];

            UE.getEditor('editor', opt);
        }
        function isFocus(e) {
            alert(UE.getEditor('editor').isFocus());
            UE.dom.domUtils.preventDefault(e)
        }
        function setblur(e) {
            UE.getEditor('editor').blur();
            UE.dom.domUtils.preventDefault(e)
        }
        function insertHtml() {
            var value = prompt('插入html代码', '');
        UE.getEditor('editor').execCommand('insertHtml', value)
        }
        function createEditor() {
            enableBtn();
            UE.getEditor('editor', {
                initialFrameWidth : "100%"
            })
        }
        function getAllHtml() {
            alert(UE.getEditor('editor').getAllHtml())
        }
        function getContent() {
            var arr = [];
            arr.push("使用editor.getContent()方法可以获得编辑器的内容");
            arr.push("内容为：");
            arr.push(UE.getEditor('editor').getContent());
            alert(arr.join("\n"));
        }
        function getPlainTxt() {
            var arr = [];
            arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
            arr.push("内容为：");
            arr.push(UE.getEditor('editor').getPlainTxt());
            alert(arr.join('\n'))
        }
        function setContent(isAppendTo) {
            var arr = [];
            arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
            UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo);
            alert(arr.join("\n"));
        }
        function setDisabled() {
            UE.getEditor('editor').setDisabled('fullscreen');
            disableBtn("enable");
        }
        function setEnabled() {
            UE.getEditor('editor').setEnabled();
            enableBtn();
        }
        function getText() {
            //当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容
            var range = UE.getEditor('editor').selection.getRange();
            range.select();
            var txt = UE.getEditor('editor').selection.getText();
            alert(txt)
        }
        function getContentTxt() {
            var arr = [];
            arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
            arr.push("编辑器的纯文本内容为：");
            arr.push(UE.getEditor('editor').getContentTxt());
            alert(arr.join("\n"));
        }
        function hasContent() {
            var arr = [];
            arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
            arr.push("判断结果为：");
            arr.push(UE.getEditor('editor').hasContents());
            alert(arr.join("\n"));
        }
        function setFocus() {
            UE.getEditor('editor').focus();
        }
        function deleteEditor() {
            disableBtn();
            UE.getEditor('editor').destroy();
        }
        function disableBtn(str) {
            var div = document.getElementById('btns');
            var btns = domUtils.getElementsByTagName(div, "button");
            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, "button");
            for (var i = 0, btn; btn = btns[i++];) {
                domUtils.removeAttributes(btn, [ "disabled" ]);
            }
        }
        function getLocalData() {
            alert(UE.getEditor('editor').execCommand("getlocaldata"));
        }
        function clearLocalData() {
            UE.getEditor('editor').execCommand("clearlocaldata");
            alert("已清空草稿箱")
        }
    </script>

</body>
</html>