UEditor富文本编辑器

最新推荐文章于 2026-05-15 09:03:13 发布

原创最新推荐文章于 2026-05-15 09:03:13 发布 · 1.1k 阅读

16 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript

一、UEditor 富文本编辑器简介

UEditor 是一款功能强大、开源且易用的富文本编辑器，它支持丰富的文本编辑功能，比如文字的字体、字号、颜色设置，插入图片、表格、超链接等，广泛应用于各类需要用户输入和编辑富文本内容的 Web 项目中，例如内容管理系统（CMS）、博客平台、论坛等，为用户提供了类似 Word 文档般便捷的在线编辑体验。

二、基本使用步骤及代码示例

1. 引入相关文件

要在网页中使用 UEditor 富文本编辑器，首先需要引入必要的文件，代码如下所示（示例中的 HTML 结构）：

<!DOCTYPE HTML>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <title>ueditor demo</title>
</head>

<body>
    <!-- 加载编辑器的容器 -->
    <script id="container" name="content" type="text/plain">
        这里写你的初始化内容
    </script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container');
    </script>
</body>
</html>

在上述代码中：

我们通过 <script> 标签定义了一个 id 为 container 的元素作为编辑器的加载容器，用户后续编辑的内容将会呈现在这个容器对应的区域内，并且可以通过 name 属性（这里是 content）方便后续表单提交等操作时对编辑内容进行标识。
引入了 ueditor.config.js 配置文件，在这个文件里可以对编辑器的各种功能、样式等进行配置，比如设置允许上传的文件类型、工具栏上显示的功能按钮等，以满足不同项目的个性化需求。
引入 ueditor.all.js 这个编辑器的源码文件，它包含了实现编辑器各种功能的核心代码逻辑。
最后通过 UE.getEditor('container') 语句实例化了编辑器，将 container 这个容器与 UEditor 实例关联起来，使得编辑器能够在对应的区域显示并工作。

2. 编辑器内容操作

设置编辑器内容

有时候我们需要在代码中动态地设置编辑器的初始内容或者更新其内容，示例代码如下：

ue.ready(function() {
    //设置编辑器的内容
    ue.setContent('hello');
});

在这段 JavaScript 代码中，利用 ue.ready 函数来确保在编辑器初始化完成、准备就绪后执行相应操作。这里调用 setContent 方法，并传入 'hello' 字符串，就可以将编辑器中的内容设置为 hello，编辑器会自动将其按照合适的 HTML 格式进行呈现（比如会显示为 <p>hello</p> 这样的段落形式）。

获取编辑器内容

获取 HTML 内容：

ue.ready(function() {
    //获取html内容，返回: <p>hello</p>
    var html = ue.getContent();
});

通过 getContent 方法，在编辑器准备好的情况下，可以获取到编辑器中内容对应的完整 HTML 代码，例如如果编辑器里编辑了一段加粗、有颜色的文字等，获取到的 HTML 代码就会包含相应的 <b>、<span style="color: xxx;"> 等标签来体现这些格式设置，方便后续进行存储、展示或者进一步处理等操作。

获取纯文本内容：

ue.ready(function() {
    //获取纯文本内容，返回: hello
    var txt = ue.getContentTxt();
});

使用 getContentTxt 方法则可以获取编辑器内容中的纯文本信息，它会去除所有的 HTML 标签等格式相关的内容，只保留纯文字内容，在某些只需要文本内容的场景下（比如提取文章摘要等）十分有用。

3. 内容回显相关操作

文本框内容回显

$(".content").val(obj.content)

这里假设页面中有一个 class 为 content 的文本框元素，通过 jQuery（这里以使用 jQuery 为例，实际中需确保引入了相关库）的 val 方法，将获取到的 obj.content（假设这是从后台传递过来的数据）设置到文本框中，实现文本框内容的回显。

富文本编辑器内容回显

对于 UEditor 富文本编辑器的内容回显，代码如下：

ue.ready(function() {
    //设置编辑器的内容
    ue.setContent(obj.content);
});

同样是在编辑器准备好之后，利用 setContent 方法，将从后台获取到的 obj.content（这里应该是包含 HTML 格式等信息的富文本内容）设置到编辑器中，使得编辑器能够正确显示之前保存或者传递过来的富文本内容，实现富文本的回显功能。