[TOC] #### 1. ueditor 介绍 --- ueditor 官方文档：[http://fex.baidu.com/ueditor](http://fex.baidu.com/ueditor) UEditor 官方不再积极维护，但作者会持续优化和修复UEditor 停更带来的一些问题 UEditor 依然是国内使用频率极高的富文本编辑器，基于 html 的项目使用的非常多，对于 vue 项目使用的是其他编辑器 UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本 web 编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码 #### 2. ueditor 下载 --- 进入标签列表，点击 `Downloads`，Github 地址：[https://github.com/fex-team/ueditor/tags](https://github.com/fex-team/ueditor/tags)  选择自己需要的版本即可，因为是使用 PHP，所以我会选择 PHP 版本的  #### 3. ueditor 使用 --- 下面是 ueditor 最简单的使用示例： 温馨提示：使用上传文件功能必须部署在 web 服务器下，并且能正常访问后端 ```html <!-- 加载编辑器的容器 --> <script id="container" name="content" type="text/plain">这里写你的初始化内容</script> <!-- 配置文件 --> <script type="text/javascript" src="ueditor/ueditor.config.js"></script> <!-- 编辑器源码文件 --> <script type="text/javascript" src="ueditor/ueditor.all.js"></script> <!-- 建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败 --> <!-- 这里加载的语言文件会覆盖你在配置项目里添加的语言类型 --> <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script> <!-- 实例化编辑器 --> <script type="text/javascript"> const ue = UE.getEditor('container') </script> ``` 加载编辑器的容器也可以使用 textarea 标签 ```html <textarea name="content" id="container">这里写你的初始化内容</textarea> ``` 设置和读取编辑器内容 ```javascript //对编辑器的操作最好在编辑器ready之后再做 ue.ready(function () { //设置编辑器的内容 ue.setContent('hello'); //获取html内容,返回: <p>hello</p> const html = ue.getContent(); //获取纯文本内容,返回: hello const txt = ue.getContentTxt(); }); ``` #### 4. 前端配置项说明 --- ueditor 的配置项分类两大类：**前端配置项** 和 **后端配置项** 修改前端配置项的两种方式： 1、修改ueditor.config.js 2、编辑器实例化的时候传入配置参数 ```javascript const ue = UE.getEditor('container', { // 自定义参数 }) ``` #### 5. 定制工具栏图标 --- UEditor 工具栏上的按钮并不是都能用到的，只需要通过修改配置项就可以自定义工具栏上的按钮列表 自定义工具栏按钮的两个方法： 1、修改 ueditor.config.js 中的 toolbars 2、实例化编辑器的时候传入 toolbars 参数 【推荐方式】 完整的工具栏按钮列表查看官方文档：[http://fex.baidu.com/ueditor/#start-toolbar](http://fex.baidu.com/ueditor/#start-toolbar) ```javascript const ue = UE.getEditor('container', { // 工具栏 toolbars: [ // 第一行 ["fullscreen", "source", "undo", "redo", "bold"], // 第二行(配置项里用竖线 "|" 代表分割线) ["fontborder", "strikethrough", "|", "superscript", "subscript"] ] }) ``` 我一般会将下面这些工具栏按钮隐藏掉 ```javascript [ 'anchor', //锚点 'insertvideo', //视频 'music', //音乐 'attachment', //附件 'map', //Baidu地图 'gmap', //Google地图 'webapp', //百度应用 'template', //模板 ] ``` #### 6. 后端配置项说明 --- 修改上传文件相关配置项：`ueditor/php/config.json` 比如上传大小限制、文件保存路径格式等配置，完整配置查看该配置文件即可，示例： ```json { // 图片保存路径格式 "imagePathFormat": "", // 文件保存路径格式 "filePathFormat": "" } ``` #### 7. 常见问题解决方案 --- **后台配置项返回格式出错，上传功能将不能正常使用 ！** 如果 ueditor 静态资源目录的访问地址是 `http://127.0.0.1:5500/ueditor`， 那么 `http://127.0.0.1:5500/ueditor/php/controller.php` 需要能访问，不能访问时会出现下图错误