UEditor文本编辑器

最新推荐文章于 2025-06-21 12:24:40 发布

原创最新推荐文章于 2025-06-21 12:24:40 发布 · 440 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#UEditor编辑器 #文本编辑 #百度编辑器 #ueditor

学习笔记专栏收录该内容

12 篇文章

订阅专栏

UEditor是百度研发的一款轻量级、高度可定制的富文本编辑器，提供良好的用户体验。开源基于BSD协议，适用于各种网页文本编辑需求。

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

官网介绍

项目链接：http://pan.baidu.com/s/1mi5kRKc 密码：3wfl
UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器，具有轻量、可定制、用户体验优秀等特点。开源基于BSD协议，所有源代码在协议允许范围内可自由修改和使用

这里写图片描述

简单应用

<html>
<head>
    <!-- 配置文件 -->
    <script type="text/javascript" src="<?php echo STATIC_PATH . "/ueditor/" ?>ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="<?php echo STATIC_PATH . "/ueditor/" ?>ueditor.all.js"></script>

    <script src="<?php echo STATIC_PATH . "/js/jquery-1.8.0.js"; ?>"></script>
</head>

<body>
<div class="editor-wrapper">
    <script id="container" name="content" type="text/plain"></script>
</div>

<input class="btn1" type="button" value="获取内容">
<input class="btn2" type="button" value="设置内容">

</body>

<!-- 实例化编辑器 -->
<script type="text/javascript">

    var ue = UE.getEditor('container', {
        //自定义工具栏图标:http://fex.baidu.com/ueditor/#start-toolbar
        toolbars: [
            [
                'bold', 'italic', 'underline', 'fontsize', 'forecolor', 'horizontal', '|',
                'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
                'simpleupload', 'attachment', '|', 'link', 'unlink', '|',
                'inserttable', 'deletetable', 'insertrow', 'insertcol', 'mergeright',
                'mergedown', 'deleterow', 'deletecol', 'splittorows', 'splittocols', 'mergecells',
                'fullscreen'
            ]
        ],
        //初始化编辑器的内容
        initialContent: '欢迎使用ueditor!',
        //初始化编辑器宽度,默认1000
        initialFrameWidth: 858,
        //初始化编辑器高度,默认320
        initialFrameHeight: 500,

        //阻止div标签自动转换为p标签
        allowDivTransToP: false,
        //是否自动长高,默认true
        autoHeightEnabled: false,

        //是否开启字数统计
        //wordCount:true
        //允许的最大字符数
        //maximumWords:10000
        //字数统计提示，{#count}代表当前字数，{#leave}代表还可以输入多少字符数,留空支持多语言自动切换，否则按此配置显示
        //wordCountMsg:''   //当前已输入 {#count} 个字符，您还可以输入{#leave} 个字符
        //超出字数限制提示  留空支持多语言自动切换，否则按此配置显示
        //wordOverFlowMsg: ''    //<span style="color:red;">你输入的字符个数已经超出最大允许值，服务器可能会拒绝保存！</span>
    });

    $(".btn1").click(function () {
        <!-- 判断编辑器是否有内容: ue.hasContents -->
        if (ue.hasContents) {
            <!-- 获取编辑器内容: ue.getContent() -->
            alert(ue.getContent());
        }
    });

    $(".btn2").click(function () {
        <!-- 设置编辑器内容: ue.setContent('设置内容') -->
        ue.setContent('设置内容!!!!');
    });

</script>
</html>