百度UEditor富文本编辑器

最新推荐文章于 2020-11-23 21:19:04 发布

dnbug Blog

最新推荐文章于 2020-11-23 21:19:04 发布

阅读量352

点赞数

分类专栏： # [Web前端基础_HTML] [Web前端基础HTML_JS_CSS] 文章标签： UEditor

本文链接：https://blog.csdn.net/u014132947/article/details/80264571

版权

[Web前端基础HTML_JS_CSS] 同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

[Web前端基础_HTML]

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <include file="include/header"/>
    <link href="__PUBLIC__/icheck-1.x/skins/all.css" rel="stylesheet">

    <!-- 配置文件 -->
    <script type="text/javascript" src="__PUBLIC__/UEditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="__PUBLIC__/UEditor/ueditor.all.js"></script>
    <script type="text/javascript" charset="utf-8" src="__PUBLIC__/UEditor/lang/zh-cn/zh-cn.js"></script>
</head>
<body>


<body>
<section class="wrapper">
    <div class="row">
        <div class="col-lg-12">
            <section class="panel" style="border-top: 2px solid #2E3238;">
                <div class="panel-body" id="panel-bodys">
                    <form name="myform" class="form-horizontal tasi-form" action="" method="post">
                        <table class="table table-striped table-advance table-hover" id="contenttable">
                            <tbody>
                            <tr>
                                <td>
                                    <div class="col-sm-12 input-group">
                                        <!-- 加载编辑器的容器 -->
                                        <script id="container" name="content" type="text/plain">{$content}</script>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="contentsubmit text-center">
                                        <input type="hidden" name="modelid" value="">
                                        <input type="hidden" name="old_status" value="">
                                        <input data-num="1" type="button" id="save" class="save-bt btn btn-info"
                                               value="保 存"> &nbsp;&nbsp;&nbsp;
                                        <input data-num="0" type="reset" class="btn btn-primary" value="重 置">
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </form>
                </div>
            </section>
        </div>
    </div>
</section>

<!-- 实例化编辑器 -->
<script type="text/javascript">
    var ue = UE.getEditor('container');
</script>

<script type="text/javascript">

    //保存内容
    $("#save").on('click', function () {
        console.log('保存内容');

        $.ajax({
            url: "/Admin/ContentSetting/about_us",
            type: "post",
            data: {"": ""},
            async: false,
            success: function (datas) {
                if (datas.error_code != 200) {
                    layer.msg(datas.error_msg, {time: 1200, icon: 5});
                    return false;
                } else {
                    layer.msg('修改成功!', {time: 1200, icon: 6});
                    table.reload('datatable');
                }
            }
        });
    });

    //重置内容
    $("input:reset").on('click', function () {
        ue.setContent('');
    });

</script>
</body>
</body>
</html>

UEditor API 文档：http://ueditor.baidu.com/doc

常用：

ready(Function fn)	否	编辑器对外提供的监听ready事件的接口，通过调用该方法，达到的效果与监听ready事件是一致的
destroy()	否	销毁编辑器实例，使用textarea代替
render(String containerId)	否	渲染编辑器的DOM到指定容器
render(Element containerDom)	否	渲染编辑器的DOM到指定容器
setHeight(Number number)	否	设置编辑器高度
getContent()	否	获取编辑器的内容
getContent(Function fn)	否	获取编辑器的内容。可以通过参数定义编辑器内置的判空规则
getAllHtml()	否	取得完整的html代码，可以直接显示成完整的html文档
getPlainTxt()	否	得到编辑器的纯文本内容，但会保留段落格式
getContentTxt()	否	获取编辑器中的纯文本内容,没有段落格式
setContent(String html)	否	设置编辑器的内容，可修改编辑器当前的html内容
setContent(String html, Boolean isAppendTo)	否	设置编辑器的内容，可修改编辑器当前的html内容
focus()	否	让编辑器获得焦点，默认focus到编辑器头部
focus(Boolean toEnd)	否	让编辑器获得焦点，toEnd确定focus位置
hasContents()	否	检查编辑区域中是否有内容
hasContents(Array tags)	否	检查编辑区域中是否有内容，若包含参数tags中的节点类型，直接返回true
reset()	否	重置编辑器，可用来做多个tab使用同一个编辑器实例
setEnabled()	否	设置当前编辑区域可以编辑
setDisabled()	否	设置当前编辑区域不可编辑
setDisabled(String except)	否	设置当前编辑区域不可编辑,except中的命令除外
setDisabled(Array except)	否	设置当前编辑区域不可编辑,except中的命令除外
setShow()	否	显示编辑器
setHide()	否	隐藏编辑器
getLang(String path)	否	根据指定的路径，获取对应的语言资源
getContentLength()	否	计算编辑器html内容字符串的长度
getContentLength(Boolean ingoneHtml)	否	计算编辑器当前纯文本内容的长度
addInputRule(Function rule)	否	注册输入过滤规则
filterInputRule(UE.uNode root)	否	执行注册的过滤规则
addOutputRule(Function rule)	否	注册输出过滤规则
filterOutputRule(UE.uNode root)	否	根据输出过滤规则，过滤编辑器内容

dnbug Blog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
百度UEditor富文本编辑器

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;include file="include/header"/&gt; &lt;link href="__PUBLIC__/icheck-1.x/skins/all.css" rel="stylesheet"&gt
复制链接

扫一扫