《文本编辑器UEditor》

悠悠 2022-03-11 08:46 314阅读 0赞

**1.官网下载地址**

[http://ueditor.baidu.com/website/download.html][http_ueditor.baidu.com_website_download.html]

这里下载最新版即可（web项目建议选择utf-8的jsp版本）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU4NTg3MQ_size_16_color_FFFFFF_t_70]  
然后再进行解压即可

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU4NTg3MQ_size_16_color_FFFFFF_t_70 1]

这里我们可以直接打开index页面，效果如下

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU4NTg3MQ_size_16_color_FFFFFF_t_70 2]

**2、配置编辑器环境**

将解压出来的编辑器文件夹整个拷贝到webapp目录下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU4NTg3MQ_size_16_color_FFFFFF_t_70 3]  
此时工程会报错，因为我们没有引用所需的jar包。  
将utf8-jsp -> jsp->lib目录下中的所有jar包拷贝到WEB-INF目录下的lib文件夹中

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU4NTg3MQ_size_16_color_FFFFFF_t_70 4]

在webapp下创建一个jsp的文件,将utf8-jsp中的index.html文件内容拷贝到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> Ueditor 编辑器 </title>
    
        <%-- Ueditor 编辑器 --%>
        
        <script type="text/javascript" charset="UTF-8" src="${pageContext.request.contextPath}/utf8-jsp/ueditor.config.js"></script>
        
        <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/utf8-jsp/ueditor.all.js"></script>
        <%--<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/utf8-jsp/ueditor.all.min.js"></script>--%>
    
        
        
        <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/utf8-jsp/lang/zh-cn/zh-cn.js"></script>
    
        <style type="text/css">
            div{
                width:100%;
            }
        </style>
    
        <script type="text/javascript">
    
            
            /*建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，*/
            /*直接调用UE.getEditor('editor')就能拿到相关的实例*/
            var ue = UE.getEditor('editor');
    
            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');
            }
    
            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() {
                
                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 = UE.dom.domUtils.getElementsByTagName(div, "button");
                for (var i = 0, btn; btn = btns[i++];) {
                    if (btn.id == str) {
                        UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
                    } else {
                        btn.setAttribute("disabled", "true");
                    }
                }
            }
    
            function enableBtn() {
                var div = document.getElementById('btns');
                var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
                for (var i = 0, btn; btn = btns[i++];) {
                    UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
                }
            }
    
            function getLocalData () {
                alert(UE.getEditor('editor').execCommand( "getlocaldata" ));
            }
    
            function clearLocalData () {
                UE.getEditor('editor').execCommand( "clearlocaldata" );
                alert("已清空草稿箱")
            }
        </script>
    
    </head>
    <body>
    
        <div>
            <script id="editor" type="text/plain" style="width:100%;height:500px;"></script>
        </div>
    
        <div id="btns">
    
            <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="setFocus()">使编辑器获得焦点</button>
            <button onmousedown="isFocus(event)">编辑器是否获得焦点</button>
            <button onmousedown="setblur(event)" >编辑器失去焦点</button>
            </div>
    
            <div>
            <button onclick="getText()">获得当前选中的文本</button>
            <button onclick="insertHtml()">插入给定的内容</button>
            <button id="enable" onclick="setEnabled()">可以编辑</button>
            <button onclick="setDisabled()">不可编辑</button>
            <button onclick=" UE.getEditor('editor').setHide()">隐藏编辑器</button>
            <button onclick=" UE.getEditor('editor').setShow()">显示编辑器</button>
            <button onclick=" UE.getEditor('editor').setHeight(300)">设置高度为300默认关闭了自动长高</button>
            </div>
    
            <div>
            <button onclick="getLocalData()" >获取草稿箱内容</button>
            <button onclick="clearLocalData()" >清空草稿箱</button>
            </div>
    
        </div>
    
            <div>
            <button onclick="createEditor()">创建编辑器</button>
            <button onclick="deleteEditor()">删除编辑器</button>
            </div>
    
    </body>
    </html>

注：使用插件时必须引入以下3个文件

调用编辑器：

初始化编辑器：

将引用js文件的相对路径补全

完成之后运行jsp文件或者运行工程，在通过浏览器访问即可

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU4NTg3MQ_size_16_color_FFFFFF_t_70 5]  
这样基本的配置就搭建就OK了

要深入了解的可以去参考这篇博客：[https://blog.csdn.net/gfd54gd5f46/article/details/60887313][https_blog.csdn.net_gfd54gd5f46_article_details_60887313]

[http_ueditor.baidu.com_website_download.html]: http://ueditor.baidu.com/website/download.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU4NTg3MQ_size_16_color_FFFFFF_t_70]: /images/20220311/90883c81dd7d4395868f963cf7402ee3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU4NTg3MQ_size_16_color_FFFFFF_t_70 1]: /images/20220311/e5c37b13126f45ebbd8a87e7cd70403a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU4NTg3MQ_size_16_color_FFFFFF_t_70 2]: /images/20220311/7ace3ae187664f5aba9af2397210ddc6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU4NTg3MQ_size_16_color_FFFFFF_t_70 3]: /images/20220311/170759525dd04276bbe5edf19679287e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU4NTg3MQ_size_16_color_FFFFFF_t_70 4]: /images/20220311/1dafffa11aaa401784c5ee5764191fba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU4NTg3MQ_size_16_color_FFFFFF_t_70 5]: /images/20220311/f52f0c1aab414affab82f821fffcdb9a.png
[https_blog.csdn.net_gfd54gd5f46_article_details_60887313]: https://blog.csdn.net/gfd54gd5f46/article/details/60887313