函数签名
UE.getEditor(domId, options)

(图片来源网络,侵删)
它接收两个参数:
domId(必需): 字符串类型,指定要渲染编辑器的 HTML 元素的id。options(可选): 对象类型,用于配置编辑器的各种行为和功能。
参数详解
domId (必需)
这是最基本也是必须的参数,它是一个字符串,指向你希望在页面上哪个位置显示编辑器。
工作原理:
UEditor 会查找页面中 id 为 domId 的 DOM 元素,然后清空该元素内部的所有内容,最后将编辑器的完整 UI 结构(包括工具栏、编辑器内容区域、状态栏等)插入到这个元素中。
示例:

(图片来源网络,侵删)
假设你的 HTML 代码如下:
<!DOCTYPE html>
<html>
<head>UEditor 示例</title>
<!-- 引入 UEditor 的 CSS 文件 -->
<link href="ueditor/themes/default/css/ueditor.min.css" type="text/css" rel="stylesheet">
</head>
<body>
<!-- 1. 创建一个容器,并设置一个 id -->
<div id="myEditor"></div>
<!-- 引入 UEditor 的 JS 文件 -->
<script src="ueditor/ueditor.config.js"></script>
<script src="ueditor/ueditor.all.min.js"></script>
<script>
// 2. 在脚本中,使用这个 id 来初始化编辑器
// 'myEditor' domId 参数
var editor = UE.getEditor('myEditor');
</script>
</body>
</html>
重要提示:
domId必须是页面中一个已存在的元素的id。- 这个元素通常是
<div>,因为编辑器需要一个块级容器来放置其复杂的内容。 - 如果指定的
domId找不到,UE.getEditor会返回null,后续所有对编辑器的操作都会失败。
options (可选)
这是一个配置对象,你可以通过修改它的属性来定制编辑器的外观、功能、行为等,这是 UEditor 高度可定制化的核心。
options 对象中的键值对对应着 UEditor 的各种配置项,这些配置项大部分在 UEditor 的主配置文件 ueditor.config.js 中都有默认定义,你可以在 UE.getEditor 中传入的 options 对象来覆盖这些默认值。
常用 options 参数示例:
下面是一些最常用和最重要的配置项:
var editor = UE.getEditor('myEditor', {
// --- 工具栏配置 ---
// toolbars: [
// ['fullscreen', 'source', 'undo', 'redo'],
// ['bold', 'italic', 'underline', 'fontfamily', 'fontsize'],
// ['justifyleft', 'justifycenter', 'justifyright', 'justifyjustify'],
// ['link', 'unlink', 'anchor'],
// ['simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo'],
// ['removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain'],
// ['forecolor', 'backcolor'],
// ['horizontal', 'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol'],
// ['print', 'preview', 'help']
// ],
// --- 常用功能开关 ---
// 是否启用自动保存
// enableAutoSave: true,
// 自动保存间隔时间,单位ms
// saveInterval: 500,
// 初始编辑器内容
initialContent: '欢迎使用 UEditor!',
// 是否显示字数统计
wordCount: true,
// 是否显示元素路径
elementPathEnabled: true,
// 是否允许拖拽上传
// enableDragUpload: true,
// 是否粘贴时过滤样式
// pasteFilterIgnore: false,
// --- 服务器相关配置 (上传图片、文件等) ---
// 图片上传接口
// serverUrl: '/ue/upload/controller', // 需要替换为你的后端接口地址
// 图片上传目录
// imagePath: "/ueditor/", // 保存图片的相对路径
// 图片最大大小,单位 KB
// imageMaxSize: 2048,
// 图片允许的格式
// imageAllowFiles: [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
// --- 其他配置 ---
// 编辑器高度,默认为 300
// initialFrameHeight: 500,
// 编辑器宽度,默认为 1000
// initialFrameWidth: null, // null 表示自适应父容器宽度
});
options 中几个特别重要的配置项:
-
initialContent- 类型:
String - 说明: 设置编辑器初始化时的内容,你可以直接传入 HTML 字符串,如果设置了此值,编辑器在加载时就会显示这些内容。
- 类型:
-
serverUrl- 类型:
String - 说明: 这是配置 UEditor 与后端交互的最重要的参数,所有需要后端支持的功能(如图片上传、视频上传、文件上传、抓取远程图片等)的请求都会发送到这个地址,你需要自己实现一个后端控制器来处理这些请求,UEditor 官方提供了多种后端语言的示例(PHP, Java, .NET, Python 等)。
- 类型:
-
toolbars- 类型:
Array - 说明: 用于自定义工具栏,你可以通过配置这个二维数组来决定工具栏上显示哪些按钮,以及它们的分组顺序,如果不设置,则使用
ueditor.config.js中的默认配置,这是一个非常灵活的配置,可以根据不同用户角色的需求来定制功能。
- 类型:
-
initialFrameHeight和initialFrameWidth- 类型:
Number - 说明: 用于设置编辑器初始化时的高度和宽度。
initialFrameWidth默认为null,表示宽度自适应父容器,高度则默认为300px,你可以根据页面布局调整这些值。
- 类型:
UE.getEditor 的返回值
UE.getEditor 不仅仅是一个初始化函数,它还会返回一个编辑器实例对象,这个对象包含了操作编辑器的所有方法和属性。
// 获取编辑器实例
var editor = UE.getEditor('myEditor');
// 你可以使用这个实例对象来执行各种操作
//
editor.ready(function() {
// 编辑器加载完成后执行的回调
console.log('编辑器已准备就绪!');
// 设置内容
editor.setContent('<h1>这是新内容</h1>');
// 获取内容
var content = editor.getContent();
console.log('编辑器内容:', content);
});
变化事件
editor.addListener('contentChange', function() {
console.log('编辑器内容已改变!');
});
| 参数 | 类型 | 必需 | 说明 |
|---|---|---|---|
domId |
String |
是 | 指定要挂载编辑器的 HTML 元素的 id。 |
options |
Object |
否 | 一个配置对象,用于覆盖 ueditor.config.js 中的默认设置,从而定制编辑器的功能、外观和行为。 |
核心流程:
- 在 HTML 中创建一个
<div>并设置唯一的id。 - 在 JavaScript 中调用
UE.getEditor('你的id', { /* 配置项 */ })。 - 函数会找到该
id的<div>,将其替换为编辑器界面,并返回一个编辑器实例。 - 通过保存返回的实例对象,你就可以在后续代码中控制编辑器(如获取/设置内容、监听事件等)。
