uEditorMini网页版如何快速集成与使用？-网页设计-锦华智联科技

准备工作：下载 UEditor

你需要从 UEditor 的官方 GitHub 仓库下载最新版本的源码。

（图片来源网络，侵删）

访问 GitHub 仓库： https://github.com/fex-team/ueditor
下载源码：点击仓库页面右侧的 "Code" -> "Download ZIP" 按钮,下载整个项目压缩包。
找到 Mini 版本文件：解压下载的 ZIP 文件，你会看到一个类似 ueditor1_4_3_3-utf8-jsp 的文件夹（版本号可能不同），进入这个文件夹，然后找到 dist/ 目录。
- ueditor.config.js: 编辑器的配置文件。
- ueditor.all.min.js: 编辑器的核心代码（包含完整功能）。
- ueditor.mini.js: 这是我们要用的精简版核心代码。
- themes/: 存放编辑器样式文件的文件夹。
- lang/: 存放语言包的文件夹。

为了方便管理，建议你创建一个新的项目文件夹，然后将 ueditor.mini.js、ueditor.config.js、themes 和 lang 这几个关键文件夹复制到你的项目中,一个典型的项目结构如下：

（图片来源网络，侵删）

my-ueditor-project/
├── index.html          # 你的网页文件
├── ueditor/
│   ├── ueditor.config.js
│   ├── ueditor.mini.js
│   ├── themes/
│   │   ├── default/
│   │   │   ├── css/
│   │   │   └── images/
│   │   └── ...
│   └── lang/
│       └── zh-cn/
└── css/
    └── style.css       # (可选) 你的页面样式

在网页中集成 UEditor Mini

下面我们通过一个完整的 index.html 示例来讲解如何集成。

`index.html` 完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">UEditor Mini 示例</title>
    <!-- 1. 引入 UEditor 的 CSS 文件 -->
    <!-- 从 default 主题中引入，你也可以换成其他主题，如 'simple' -->
    <link rel="stylesheet" href="ueditor/themes/default/css/ueditor.css" type="text/css">
    <style>
        /* 一些简单的页面样式 */
        body {
            font-family: Arial, "Microsoft YaHei", sans-serif;
            padding: 20px;
            background-color: #f4f4f4;
        }
        .container {
            max-width: 900px;
            margin: 0 auto;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            color: #333;
        }
        #editor {
            width: 100%;
            min-height: 300px; /* 给编辑器一个初始高度 */
        }
        #submit-btn {
            margin-top: 15px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>使用 UEditor Mini 编辑器</h1>
        <!-- 2. 创建一个 textarea 作为编辑器的容器 -->
        <!-- id 是必须的，后续的初始化会用到它 -->
        <textarea id="editor"></textarea>
        <!-- 3. 引入 UEditor 的 JS 文件 -->
        <!-- 注意顺序：先 config，再 mini.js -->
    <script type="text/javascript" src="ueditor/ueditor.config.js"></script>
    <script type="text/javascript" src="ueditor/ueditor.mini.js"></script>
    <!-- 4. 初始化编辑器 -->
    <script type="text/javascript">
        // 实例化编辑器
        // UE.getEditor('editor-id') 是官方提供的初始化方法
        // 'editor' 是上面 textarea 的 id
        var editor = UE.getEditor('editor');
        editor.ready(function() {
            // editor准备好之后，你可以在这里做一些初始化后的操作
            console.log('UEditor 初始化完成！');
        });
        // 可选：监听内容变化事件
        editor.addListener('contentChange', function () {
            console.log('内容已更改');
        });
    </script>
    <button id="submit-btn" onclick="getContent()">获取编辑器内容</button>
    <pre id="content-display"></pre>
    <script>
        function getContent() {
            // 通过 editor.getContent() 方法获取编辑器中的HTML内容
            var content = editor.getContent();
            document.getElementById('content-display').innerText = content;
            // 也可以获取纯文本内容
            // var contentTxt = editor.getContentTxt();
            // console.log('纯文本内容:', contentTxt);
        }
    </script>
    </div>
</body>
</html>

代码详解

引入 CSS (<head>标签内)
```
<link rel="stylesheet" href="ueditor/themes/default/css/ueditor.css" type="text/css">
```
- 这行代码用于加载编辑器的样式，包括工具栏按钮的样式、编辑区域的样式等。
- themes/default/ 指定了使用 "default" 主题，UEditor 提供了多个主题，如 simple（简洁）、office（Office风格）等,你可以通过修改这个路径来更换主题。
创建容器 (<body>标签内)
```
<textarea id="editor"></textarea>
```
- UEditor 最终会替换掉这个 <textarea> 元素,将其渲染成一个可视化的富文本编辑器。
- id="editor" 是必须的，因为 JavaScript 初始化代码需要通过这个 ID 来找到并操作这个元素。
引入 JS (<body>标签末尾)
（图片来源网络，侵删）
```
<script type="text/javascript" src="ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="ueditor/ueditor.mini.js"></script>
```
- 顺序很重要：必须先引入 ueditor.config.js，再引入 ueditor.mini.js。
- ueditor.config.js 包含了编辑器的全局配置项。
- ueditor.mini.js 是编辑器的核心代码。
初始化编辑器 (<script>标签内)
```
var editor = UE.getEditor('editor');
```
- 这是初始化编辑器的核心代码。
- UE.getEditor() 是 UEditor 提供的全局函数。
- 传入的参数 'editor' 就是我们上面 <textarea> 的 id。
- 这行代码执行后，页面上的 <textarea> 就变成了功能完整的富文本编辑器。
- editor 变量是一个对象,它包含了操作编辑器的所有方法和属性。
获取编辑器内容
```
function getContent() {
    var content = editor.getContent();
    document.getElementById('content-display').innerText = content;
}
```
- editor.getContent(): 这个方法用于获取编辑器中的HTML格式
- editor.getContentTxt(): 如果你想获取纯文本内容,可以使用这个方法。

常用配置

你可以在 ueditor.config.js 文件中修改全局配置,或者在初始化时传入配置对象来覆盖全局设置。

示例：在初始化时传入配置

var editor = UE.getEditor('editor', { // 工具栏上的按钮 toolbars: [ ['bold', 'italic', 'underline', 'forecolor', 'backcolor', '|', 'insertorderedlist', 'insertunorderedlist', '|', 'link', 'unlink', 'simpleupload'] ], // 编辑器高度，默认为 500 initialFrameHeight: 300, // 编辑器宽度，默认为 100% initialFrameWidth: '100%', // 是否启用自动保存 enableAutoSave: false, // 语言 lang: 'zh-cn' });

常用配置项说明：

toolbars: 自定义工具栏按钮，你可以从 ueditor.config.js 的 UEditor.options.toolbars 中找到所有可用的按钮名称。

initialFrameHeight: 设置编辑器的初始高度。

initialFrameWidth: 设置编辑器的初始宽度。

autoFloatEnabled: 是否启用工具栏自动浮动（当页面滚动时，工具栏会固定在顶部）。

elementPathEnabled: 是否显示底部的元素路径栏。

textarea: 提交表单时，是否要创建一个隐藏的 <textarea> 来同步内容，默认为 true,在大多数情况下保持默认即可。

使用 UEditor Mini 版本非常简单,核心步骤就是：

下载并整理好 UEditor 的文件。

在 HTML 中通过 <link> 引入 CSS。

创建一个带 id 的 <textarea> 作为容器。

通过 <script> 按顺序引入 config.js 和 mini.js。

在 JavaScript 中使用 UE.getEditor('id') 初始化编辑器。

通过 editor.getContent() 等方法操作和获取编辑器内容。

这个精简版非常适合快速集成，避免了完整版带来的复杂性和不必要的功能,是一个轻量级且功能够用的富文本编辑解决方案。

uEditorMini网页版如何快速集成与使用？

准备工作：下载 UEditor

在网页中集成 UEditor Mini

index.html 完整代码

代码详解

常用配置

示例：在初始化时传入配置

`index.html` 完整代码