UEditor--富文本编辑器

最新推荐文章于 2024-08-05 17:43:42 发布

lavendersue

最新推荐文章于 2024-08-05 17:43:42 发布

阅读量1.1k

点赞数

分类专栏：常用插件

原文链接：http://fex.baidu.com/ueditor/#start-start

版权

常用插件专栏收录该内容

18 篇文章 0 订阅

订阅专栏

介绍

UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。

特点

支持拖拽图片上传
支持QQ截图后粘贴上传图片
支持图片直传第三方云储存
支持Chrome的图片拖动改变大小
支持公式编辑
支持地图插入
支持表情插入
支持附件图片插入

下载

官网下载：http://ueditor.baidu.com/website/download.html#ueditor
小编友情提供
百度网盘：
链接：https://pan.baidu.com/s/1fKnwozEZLHwk4LxXC8QbQA
提取码：274r

使用方式

引入js和css文件：

 <link href="umeditor.css"  type="text/css" rel="stylesheet">
<script type="text/javascript" src="jquery.min.js"></script>
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script>

<!-- 编辑器源码文件 -->
<script type="text/javascript" src="ueditor.js"></script>

<!-- 编辑器语言 -->
<script src="umeditor/js/lang/zh-cn/zh-cn.js"></script>

API

参数

{
        UEDITOR_HOME_URL:"", //{Path String} [默认值：根据config文件路径自动获取] // 为编辑器实例添加一个路径，这个不能被注释
        serverUrl :"",//{Path String} [默认值：URL + "php/controller.php"] // 服务器统一请求接口路径
        toolbars:[],// {2d Array} //工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的从新定义
        labelMap:{},// {Object} [默认：从lang包的labelMap项获取] //参数格式是键值对，键名对应toolbar参数的项：{"bold": "加粗"} ]，当鼠标放在工具栏上时显示的tooltip提示，留空支持自动多语言配置，否则以配置值为准
        lang:"zh-cn",// {String} [默认值："zh-cn"] //lang值也可以通过自动获取 (navigator.language||navigator.browserLanguage ||navigator.userLanguage).toLowerCase()，语言配置项，默认是zh-cn。有需要的话也可以使用如下这样的方式来自动多语言切换，当然，前提条件是lang文件夹下存在对应的语言文件：
        langPath:"",// {Path String} [默认值：URL +"lang/"] //语言包文件存放目录
        theme:"default",// {String} [默认值：'default'] //主题配置项，默认是default。有需要的话也可以使用如下这样的方式来自动多主题切换，当然，前提条件是themes文件夹下存在对应的主题文件：
        themePath:"",// {Path String} [默认值：URL +"themes/"] //现有如下皮肤：default
        zIndex:900,// {Number} [默认值：900] //编辑器在页面上的z-index层级的基数，默认是900
        charset:"utf-8",// {String} [默认值："utf-8"] //针对getAllHtml方法，会在对应的head标签中增加该编码设置。
        customDomain:false,// {Boolean} [默认值：false] //若实例化编辑器的页面手动修改的domain，此处需要设置为true
        isShow:true,// {Boolean} [默认值：true] //默认显示编辑器
        textarea:"editorValue",// {String} [默认值：'editorValue'] // 提交表单时，服务器获取编辑器提交内容的所用的参数，多实例时可以给容器name属性，会将name给定的值最为每个实例的键值，不用每次实例化的时候都设置这个值
        initialContent:"欢迎使用ueditor!",// {String} [默认值：'欢迎使用ueditor!'] //初始化编辑器的内容，也可以通过textarea/script给值，看官网例子
        autoClearinitialContent:true,// {Boolean} [默认值：true] //是否自动清除编辑器初始内容，注意：如果focus属性设置为true，这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
        focus:false,// {Boolean} [默认值：false] //初始化时，是否让编辑器获得焦点true或false
        initialStyle:"p{line-height:1em}" ,//{String} [默认值：'p{line-height:1em}']//编辑器层级的基数，可以用来改变字体等 //如果自定义，最好给p标签如下的行高，要不输入中文时，会有跳动感
        iframeCssUrl:"",// {Path String} [默认值：URL + '/themes/iframe.css'] //给编辑器内部引入一个css文件
        indentValue:"2em",// {String} [默认值：'2em'] //首行缩进距离，默认是2em
        initialFrameWidth:1000,// {Number} [默认值：1000] //初始化编辑器宽度，默认1000
        initialFrameHeight:320,// {Number} [默认值：320] //初始化编辑器高度，默认320
        readonly:false,// {Boolean} [默认值：false] //编辑器初始化结束后，编辑区域是否是只读的，默认是false
        autoClearEmptyNode:true,// {Boolean} [默认值：true] //getContent时，是否删除空的inlineElement节点（包括嵌套的情况）
        enableAutoSave:true,// {Boolean} [默认值：true] //启用自动保存
        saveInterval:500,// {Number} [默认值：500] //自动保存间隔时间，单位ms
        imageScaleEnabled:true,// {Boolean} [默认值：true] //启用图片拉伸缩放
        fullscreen:false,// {Boolean} [默认值：false] //是否开启初始化时即全屏，默认关闭
        imagePopup:true,// {Boolean} [默认值：true] //图片操作的浮层开关，默认打开
        autoSyncData :true,//{Boolean} [默认值：true] //自动同步编辑器要提交的数据
        emotionLocalization:false,// {Boolean} [默认值：false] //是否开启表情本地化，默认关闭。若要开启请确保emotion文件夹下包含官网提供的images表情文件夹
        retainOnlyLabelPasted:false,// {Boolean} [默认值：false] //粘贴只保留标签，去除标签所有属性
        pasteplain:false,// {Boolean} [默认值：false] //是否默认为纯文本粘贴。false为不使用纯文本粘贴，true为使用纯文本粘贴
        filterTxtRules:{},// {Object} //纯文本粘贴模式下的过滤规则
    }

方法

var ue = UM.getEditor('container')：实例化编辑器到id为 container 的 dom 容器上
ue.setContent('hello!')：设置编辑器内容
ue.setContent('new text', true)：设置编辑器内容
ue.getContent()：获取编辑器html内容
ue.getContentTxt()：获取纯文本内容
ue.getPlainTxt()：获取保留格式的文本内容
ue.hasContents()：判断编辑器是否有内容
ue.focus()：让编辑器获得焦点
ue.blur()：让编辑器失去焦点
ue.isFocus()：判断编辑器是否获得焦点
ue.setDisabled()：设置当前编辑区域不可编辑
ue.setEnabled()：设置当前编辑区域可以编辑
ue.setHide()：隐藏编辑器
ue.setShow()：显示编辑器
ue.selection.getText()：获得当前选中的文本

命令

ue.execCommand('redo')：撤销回退编辑器内容
ue.execCommand('source')：切换源码和可视化编辑模式
ue.execCommand('selectall')：选中所有内容
ue.execCommand('cleardoc')：清空内容
ue.execCommand('drafts')：读取草稿箱
ue.execCommand('clearlocaldata')：清空草稿箱
ue.setShow()：显示编辑器
ue.setShow()：显示编辑器
ue.setShow()：显示编辑器
ue.execCommand('inserthtml', 'hello!')：在当前光标位置插入html内容
ue.execCommand('bold'); //加粗 ue.execCommand('italic'); //加斜线 ue.execCommand('subscript'); //设置上标 ue.execCommand('supscript'); //设置下标 ue.execCommand('forecolor', '#FF0000'); //设置字体颜色 ue.execCommand('backcolor', '#0000FF'); //设置字体背景颜色:设置当前选区文本格式

事件

ue.ready(）：编辑器准备就绪后会触发该事件
ue.destroy()：执行destroy方法,会触发该事件
ue.reset()：执行reset方法,会触发该事件
ue.focus()：执行focus方法,会触发该事件
ue.langReady()：语言加载完成会触发该事件
ue.beforeExecCommand()：运行命令之后会触发该命令
ue.afterExecCommand()：运行命令之后会触发该命令
ue.firstBeforeExecCommand()：运行命令之前会触发该命令
ue.beforeGetContent()：在getContent方法执行之前会触发该事件
ue.afterGetContent()：在getContent方法执行之后会触发该事件

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="umeditor/themes/default/css/umeditor.css">
     <style type="text/css">
        h1{
            font-family: "微软雅黑";
            font-weight: normal;
        }
        .btn {
            display: inline-block;
            *display: inline;
            padding: 4px 12px;
            margin-bottom: 0;
            *margin-left: .3em;
            font-size: 14px;
            line-height: 20px;
            color: #333333;
            text-align: center;
            text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
            vertical-align: middle;
            cursor: pointer;
            background-color: #f5f5f5;
            *background-color: #e6e6e6;
            background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
            background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
            background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
            background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
            background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
            background-repeat: repeat-x;
            border: 1px solid #cccccc;
            *border: 0;
            border-color: #e6e6e6 #e6e6e6 #bfbfbf;
            border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
            border-bottom-color: #b3b3b3;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
            filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
            *zoom: 1;
            -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
            -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        }

        .btn:hover,
        .btn:focus,
        .btn:active,
        .btn.active,
        .btn.disabled,
        .btn[disabled] {
            color: #333333;
            background-color: #e6e6e6;
            *background-color: #d9d9d9;
        }

        .btn:active,
        .btn.active {
            background-color: #cccccc \9;
        }

        .btn:first-child {
            *margin-left: 0;
        }

        .btn:hover,
        .btn:focus {
            color: #333333;
            text-decoration: none;
            background-position: 0 -15px;
            -webkit-transition: background-position 0.1s linear;
            -moz-transition: background-position 0.1s linear;
            -o-transition: background-position 0.1s linear;
            transition: background-position 0.1s linear;
        }

        .btn:focus {
            outline: thin dotted #333;
            outline: 5px auto -webkit-focus-ring-color;
            outline-offset: -2px;
        }

        .btn.active,
        .btn:active {
            background-image: none;
            outline: 0;
            -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
            -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
        }

        .btn.disabled,
        .btn[disabled] {
            cursor: default;
            background-image: none;
            opacity: 0.65;
            filter: alpha(opacity=65);
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
        }
    </style>
</head>
<body>
<script id="myEditor" name="content" type="text/plain"></script>

<script src="js/jquery.min.js"></script>
<script src="umeditor/js/umeditor.js"></script>
<script src="umeditor/js/umeditor.config1.js"></script>
<script src="umeditor/js/lang/zh-cn/zh-cn.js"></script>

<div id="btns">
    <table>
        <tr>
            <td>
                <button class="btn" unselected="on" onclick="getAllHtml()">获得整个html的内容</button>&nbsp;
                <button class="btn" onclick="getContent()">获得内容</button>&nbsp;
                <button class="btn" onclick="setContent()">写入内容</button>&nbsp;
                <button class="btn" onclick="setContent(true)">追加内容</button>&nbsp;
                <button class="btn" onclick="getContentTxt()">获得纯文本</button>&nbsp;
                <button class="btn" onclick="getPlainTxt()">获得带格式的纯文本</button>&nbsp;
                <button class="btn" onclick="hasContent()">判断是否有内容</button>
            </td>
        </tr>
        <tr>
            <td>
                <button class="btn" onclick="setFocus()">编辑器获得焦点</button>&nbsp;
                <button class="btn" onmousedown="isFocus();return false;">编辑器是否获得焦点</button>&nbsp;
                <button class="btn" onclick="doBlur()">编辑器取消焦点</button>&nbsp;
                <button class="btn" onclick="insertHtml()">插入给定的内容</button>&nbsp;
                <button class="btn" onclick="getContentTxt()">获得纯文本</button>&nbsp;
                <button class="btn" id="enable" onclick="setEnabled()">可以编辑</button>&nbsp;
                <button class="btn" onclick="setDisabled()">不可编辑</button>
            </td>
        </tr>
        <tr>
            <td>
                <button class="btn" onclick="UM.getEditor('myEditor').setHide()">隐藏编辑器</button>&nbsp;
                <button class="btn" onclick="UM.getEditor('myEditor').setShow()">显示编辑器</button>&nbsp;
                <button class="btn" onclick="UM.getEditor('myEditor').setHeight(300)">设置编辑器的高度为300</button>&nbsp;
                <button class="btn" onclick="UM.getEditor('myEditor').setWidth(1200)">设置编辑器的宽度为1200</button>
            </td>
        </tr>

    </table>
</div>
<table>
    <tr>
        <td>
            <button class="btn" onclick="createEditor()"/>创建编辑器</button>
            <button class="btn" onclick="deleteEditor()"/>删除编辑器</button>
        </td>
    </tr>
</table>

<div>
    <h3 id="focush2"></h3>
</div>
<script type="text/javascript">
    //实例化编辑器
    var um = UM.getEditor('myEditor');
    um.addListener('blur',function(){
        $('#focush2').html('编辑器失去焦点了')
    });
    um.addListener('focus',function(){
        $('#focush2').html('')
    });
    //按钮的操作
    function insertHtml() {
        var value = prompt('插入html代码', '');
        um.execCommand('insertHtml', value)
    }
    function isFocus(){
        alert(um.isFocus())
    }
    function doBlur(){
        um.blur()
    }
    function createEditor() {
        enableBtn();
        um = UM.getEditor('myEditor');
    }
    function getAllHtml() {
        alert(UM.getEditor('myEditor').getAllHtml())
    }
    function getContent() {
        var arr = [];
        arr.push("使用editor.getContent()方法可以获得编辑器的内容");
        arr.push("内容为：");
        arr.push(UM.getEditor('myEditor').getContent());
        alert(arr.join("\n"));
    }
    function getPlainTxt() {
        var arr = [];
        arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
        arr.push("内容为：");
        arr.push(UM.getEditor('myEditor').getPlainTxt());
        alert(arr.join('\n'))
    }
    function setContent(isAppendTo) {
        var arr = [];
        arr.push("使用editor.setContent('欢迎使用umeditor')方法可以设置编辑器的内容");
        UM.getEditor('myEditor').setContent('欢迎使用umeditor', isAppendTo);
        alert(arr.join("\n"));
    }
    function setDisabled() {
        UM.getEditor('myEditor').setDisabled('fullscreen');
        disableBtn("enable");
    }

    function setEnabled() {
        UM.getEditor('myEditor').setEnabled();
        enableBtn();
    }

    function getText() {
        //当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容
        var range = UM.getEditor('myEditor').selection.getRange();
        range.select();
        var txt = UM.getEditor('myEditor').selection.getText();
        alert(txt)
    }

    function getContentTxt() {
        var arr = [];
        arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
        arr.push("编辑器的纯文本内容为：");
        arr.push(UM.getEditor('myEditor').getContentTxt());
        alert(arr.join("\n"));
    }
    function hasContent() {
        var arr = [];
        arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
        arr.push("判断结果为：");
        arr.push(UM.getEditor('myEditor').hasContents());
        alert(arr.join("\n"));
    }
    function setFocus() {
        UM.getEditor('myEditor').focus();
    }
    function deleteEditor() {
        disableBtn();
        UM.getEditor('myEditor').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"]);
        }
    }
</script>

</body>
</html>

官网地址：http://fex.baidu.com/ueditor/#start-start
Github地址：https://github.com/fex-team/ueditor