按【Ctrl+D】或拖动【 小墨鹰LOGO】到书签栏，收藏本站！
二、新版视频教程
三、新手入门
四、微信公众号早报
五、手机版编辑器
六、功能详细介绍
七、基础排版技巧
八、常见问题解答
九、日常教程
十、微信公众号扫盲
十一、高级功能详细介绍
十二、进阶排版技巧
十三、特殊素材使用教程
十四、高分文章排版技巧
十五、公众号排版模板
十六、公众号运营
十七、微信图文模板
十八、新媒体运营
十九、会员常见问题
发布时间：2021-10-10 15:50:55
百度编辑器官方文档地址：http://fex.baidu.com/ueditor/
一、目录简介
将压缩包解压后会得到一个文件夹 "ueditor"。包含以下核心文件
ueditor 文件夹为编辑器内部核心文件所在，如不了解，请勿随意改动。
ueditor/_plugin编辑器插件存放目录。
ueditor/dialogs 编辑器弹出对话框对应的资源和JS文件。
ueditor/images文件夹为编辑器内部扩展引用图片，包括推荐背景，表情，图片边框等。
ueditor/kityformula-plugin 编辑器插入公式功能弹窗存放目录。
ueditor/lang: 编辑器国际化显示的文件。
ueditor/php: 编辑器涉及到服务器端操作的后台文件。
ueditor/themes: 编辑器内部样式图片和样式文件。
ueditor/third-party: 编辑器第三方插件(包括代码高亮，源码编辑等组件）。
ueditor/xmycss: 编辑器整体样式文件。
ueditor.all.js: 开发版代码合并的结果,目录下所有文件的打包文件。
ueditor.all.min.js: ueditor.all.js文件的压缩版，建议在正式部署时采用。
ueditor.config.js: 编辑器的配置文件，建议和编辑器实例化页面置于同一目录。
二、引入详解
1、参考下面示例，我们首先需要在页面中创建一个容器节点，然后设置节点id，ps：示例中 id 为 editor，编辑区域的宽高会根据容器宽高自适应。
代码示例
<!-- 编辑器渲染容器 --> <div id="editor"></div>
2、引入必要文件
CSS
<link rel="stylesheet" href="/ueditor/xmycss/xmyEditor.all.css">
JS（注意：js文件引入需要在<body></body>中编辑器渲染容器后，不可放置到<header></header>中）
<!-- 引用项目本身的jq即可 --><script type="text/javascript" src="/jq.js"></script><!-- 插件核心文件，引入顺序不可更改 --><script type="text/javascript" src="/ueditor/ueditor.config.js"></script><script type="text/javascript" src="/ueditor/ueditor.all.js"></script><script type="text/javascript" src="/ueditor/xmyEditor.all.js"></script><!-- 插件核心文件引入结束 -->
3、在JS中实例化编辑器，并获取到实例化对象，后续就可以通过此实例化对象进行编辑器操作，比如获取编辑区内容、清空内容等等。
<script>var ue = UE.getEditor('editor');</script>
4、修改上传接口路径（修改ueditor.config.js中的serverUrl 参数，如不配置，会导致图片上传无法使用）
配置说明如下：
假设配置serverUrl为：https://www.test.com/upload
需要在配置的serverUrl上挂载参数action（action为动作，以下为不同动作的参数及返回值详解。接口处理时需要判断动作进行相应的处理并返回相应的数据格式，否则会造成图片无法上传等问题。）
上传图片（file类型）：action 对应的值为 uploadimage 。
请求示例: https://www.test.com/upload
必须参数：action（动作 -- uploadimage）、file（图片文件对象）、imagename（文件名）
返回格式：
// 请求成功返回格式
{
size: 123456（文件大小，单位b）,
state: "SUCCESS"（请求是否成功状态）,
title: "timg.jpg"（文件名）,
type: "jpg"（文件类型，png，jpg，gif等）,
url: "https://www.test.com/images/01.jpg"（图片链接）
}
// 请求错误返回格式
{
state: "ERROR",
msg: '提示信息'（提示信息）
}
上传图片（base64类型）：action 对应的值为 filesbase64 。
请求示例：https://www.test.com/upload
必须参数：action（动作 -- filesbase64）、base64（图片文件base64编码），imagename（文件名）
返回格式：
// 请求成功返回格式
{
state: "SUCCESS"（请求是否成功状态）,
title: "01.jpg"（文件名）,
type: "jpg"（文件类型，png，jpg，gif等）,
url: "https://www.test.com/images/01.jpg"（图片链接）
}
// 请求错误返回格式
{
state: "ERROR",
msg: '提示信息'（提示信息）
}
图片列表（上传图片列表）：action 对应的值为 listimage。
请求示例：https://www.test.com/upload
必须参数：action（动作 -- listimage）、page（页码），limit（一页数据条数）
返回格式：
//请求成功返回格式
{
list:[{
filepath:'https://www.test.com/images/01.jpg',
},{
filepath:'https://www.test.com/images/02.jpg',
}],
page:1,（当前页码），
state:'SUCCESS',（请求成功状态）,
total:321 (图片总数量)
}
// 请求错误返回格式
{
state:'ERROR',（请求失败状态），
msg:'错误信息'（错误信息）
}
根据url生成base64编码（上传图片列表）：action 对应的值为 urlbase64。
请求示例：https://www.test.com/upload
必须参数：action（动作 -- urlbase64）、url（图片链接）
返回格式：
// 请求成功返回格式
{
code: 0（请求成功状态）,
data: "data:image/jpeg....."（图片base64编码）,
msg: "请求成功"（提示信息）,
}
// 请求错误返回格式
{
code: "1",（请求失败状态）,
msg: '提示信息'（提示信息）
}
删除我的图片（上传图片删除）：action 对应的值为 delimage。
请求示例：https://www.test.com/upload
必须参数：action（动作 -- delimage）、url（图片链接）
返回格式：
// 请求成功返回格式
{
code: 0（请求成功状态）,
msg: "请求成功"（提示信息）,
}
// 请求错误返回格式
{
code: "1",（请求失败状态）,
msg: '提示信息'（提示信息）
}
5、配置秘钥，修改 ueditor.config.js 中的 xmy_key 参数 此参数会在压缩包中与两个目录平级的 keystory.txt 文件
三、配置及使用
1、自定义工具栏功能按钮
a、通过修改 ueditor/ueditor.config.js 文件中的 toolbars 参数，此方法作用于全局，所有引入编辑器的页面都会生效。
b、通过实例化时传入参数 toolbars 此方法仅针对当前实例化编辑器生效。
<script>var ue = UE.getEditor('editor', {toolbars: [['fullscreen', 'source', 'undo', 'redo', 'bold']],});</script>
四、常用API列表
<script>//实例化编辑器var ue = UE.getEditor('editor');//监听编辑器加载完成事件ue.ready(function() {});//设置编辑器内容ue.setContent('<p>hello!</p>');//追加编辑器内容ue.setContent('<p>new text</p>', true);//获取编辑器html内容var html = ue.getContent();//获取纯文本内容ue.getContentTxt();//获取保留格式的文本内容ue.getPlainTxt();//判断编辑器是否有内容ue.hasContents();//让编辑器获得焦点ue.focus();//让编辑器失去焦点ue.blur();//判断编辑器是否获得焦点ue.isFocus();//设置当前编辑区域不可编辑ue.setDisabled();//设置当前编辑区域可以编辑ue.setEnabled();//隐藏编辑器ue.setHide();//显示编辑器ue.setShow();//获得当前选中的文本ue.selection.getText();//在当前光标位置插入html内容ue.execCommand('inserthtml', '<span>hello!</span>');//设置当前选区文本格式ue.execCommand('bold'); //加粗ue.execCommand('italic'); //加斜线ue.execCommand('subscript'); //设置上标ue.execCommand('supscript'); //设置下标ue.execCommand('forecolor', '#FF0000'); //设置字体颜色ue.execCommand('backcolor', '#0000FF'); //设置字体背景颜色//回退编辑器内容ue.execCommand('undo');//撤销回退编辑器内容ue.execCommand('redo');//切换源码和可视化编辑模式ue.execCommand('source');//选中所有内容ue.execCommand('selectall');//清空内容ue.execCommand('cleardoc');</script>
微信在线客服
请提供详细的截图大图+文字说明您的问题。
微信扫码查看帮助
扫码关注，获取各种排版小技巧，黑科技！
小墨鹰编辑器 Copyright © 2015-2026 www.xmyeditor.com 河南九鲸网络科技有限公司
ICP备案号：豫ICP备16024496号-1 豫公网安备：41100202000215 经营许可证编号：豫B2-20250200 网信算备：410103846810501250019号
