# UMeditor-Plus
**Repository Path**: opsfast/UMeditor-Plus
## Basic Information
- **Project Name**: UMeditor-Plus
- **Description**: UMeditor-Plus，是基于 UMeditor 二次开发，移除服务端相关，可以支持所有云存储上传。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 2
- **Created**: 2019-02-14
- **Last Updated**: 2020-12-19
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
## UMeditor-Plus富文本编辑器 ##
UMeditor-Plus，是基于 [UMeditor](https://ueditor.baidu.com/website/umeditor.html) 二次开发，移除服务端相关，可以支持所有云存储上传。
### 主要特点 ###
1. **轻量**: 主文件的代码量为139k。
2. **加载速度更快**: 放弃了使用传统的iframe模式，采用了div的加载方式，以达到更快的加载速度和零加载失败率。
2. **可定制**: 配置项完善，可定制程度高。
2. **可扩展**: 代码层次拆分清晰，功能以插件形式挂接，可灵活定制需要的功能。
3. **多后台支持**: 与后台代码完全无关，只需配置umeditor.server.js 文件就能支持所有云存储上传
4. **功能丰富**: 支持插入公式、粘贴QQ截屏、拖放上传图片、插入地图、草稿箱功能
## 入门部署和体验 ##
### 第一步：下载编辑器 ###
下载 umeditor-plus 最新版源码版本，下载之后打开 _examples/index.html 就可以看到演示例子。[[下载页面]](https://gitee.com/timtter/UMeditor-Plus/repository/archive/master.zip "下载页面")
### 第二步：部署编辑器到页面 ###
* 解压下载的包，放到你的项目中。
* 在你的页面要插入编辑器的位置，插入代码：
```html
```
* 在``````标签最后，插入需要引用的文件和实例化编辑器的代码(注意修改引用文件的路径),
其中：UM 依赖 jquery 和 [etpl](https://github.com/ecomfe/etpl) , 注意引入文件的顺序
```html
```
* 配置 umeditor.config.js
```html
//图片上传配置区
, imageUrl: "http://v0.api.upyun.com/china256web" //图片上传提交地址
, imagePath: "//static.china256.com/" //图片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置
, imageFieldName: "file" //图片数据的key,若此处修改，需要在后台对应文件修改对应参数
```
* 云存储需要配置 umeditor.server.js
```html
/**
* 触发uploadBeforeSend事件时执行
* 在文件上传之前触发，用来添加附带参数
* @param {Object} formdata 当前上传表单FormData
* @returns 上传参数对象
*/
setFormData: function (formdata) {
/**
* 获得云存储签名
* */
$.ajax({
url: "http://localhost:901/upyun/token",
type: 'post',
async: false,
// headers: {"X-CSRF-TOKEN": $("meta[name=\"csrf-token\"]").attr('content')}
}).done(function (res) {
if (res.status) {
formdata.append('policy', res.data.policy);
formdata.append('signature', res.data.signature);
}
}).fail(function (err) {
});
return formdata;
},
```
* 这时候你再浏览器打开你的页面，看到下面这样的编辑器，说明你已部署成功。
### 第三步：获取和设置编辑器的内容 ###
```javascript
/* 获取编辑器内容 */
var html = um.getContent();
var txt = um.um.getContentTxt();
/* 设置编辑器内容 */
um.setContent('要设置的编辑器内容.');
```
## 相关链接 ##
UMeditor官网: [http://ueditor.baidu.com](http://ueditor.baidu.com/website/umeditor.html "umeditor 官网")
百度FEX-Team: [http://fex.baidu.com](http://fex.baidu.com "umeditor github 地址")
## 联系我们 ##
邮件: [1332934422@qq.com](mailto://email:1332934422@qq.com "发邮件给UMeditor-Plus开发组")