## 一、概述
为了统一收归第三方插件能力，共同促进公众平台内容生态发展，现将 mp 编辑器页面的部分能力，以 jsApi 的形式挂载在页面 `window.__MP_Editor_JSAPI__` 对象上，供第三方插件使用。

## 二、使用

#### invoke 调用编辑器接口
```js
window.__MP_Editor_JSAPI__.invoke({
    apiName: 'mp_editor_change_cover',  // 接口名称
    apiParam: {...},                    // 接口参数
    sucCb: (res) => {console.log(res)}, // 接口调用成功回调
    errCb: (err) => {console.log(err)}  // 接口调用失败回调
});
```

#### on 监听编辑器事件
```js
window.__MP_Editor_JSAPI__.on({
    eventName: 'mp_editor_change_cover',      // 事件名称
    callBack: (param) => {console.log(param)} // 事件回调
});
```

## 三、编辑器接口

### 1. 修改文章封面

#### 接口名称
`mp_editor_change_cover`

#### 接口参数

| 参数	         | 类型	            | 是否必填  | 说明								                 	 | 示例                                             |
| ------------- | ---------------- | ------- | -------------------------------------- | ----------------------------------------------- |
| oriImgUrl     | String           |	是	    | 封面原图 http 链接	                     | 'https://mmbiz.qpic.cn/mmbiz_jpg/xxxx'          |
| picCrop_235_1 | Array\  |	否	    | 2.35:1 封面尺寸裁剪坐标，不填则默认居中裁剪  |  [x1, y1, x2, y2]（含义请参考下方「裁剪坐标示意图」） |
| picCrop_1_1	  | Array\  |  否	    | 1:1 封面尺寸裁剪坐标，不填则默认居中裁剪	   |  [x1, y1, x2, y2]（含义请参考下方「裁剪坐标示意图」） |

#### 裁剪坐标示意图
![](https://res.wx.qq.com/op_res/Te1vEb6OlxJHSS0UYLUOEpqxdSZ4jJyxdhL8gq5la-vHCmV4pPI1yq5O2l_49MG-EBroYgkCRVkYAg86udeEFw)  

#### 调用示例
```js
window.__MP_Editor_JSAPI__.invoke({
    apiName: 'mp_editor_change_cover',   // 接口名称
    apiParam: {                          // 接口参数 
        oriImgUrl:'https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png', 
        picCrop_235_1: [0, 0.09, 0.54, 0.53],
        picCrop_1_1: [0.43, 0, 0.95, 1]
    },
    sucCb: (res) => {console.log('设置成功', res)},  // 成功回调
    errCb: (err) => {console.log('设置失败', err)}   // 失败回调
});
```

#### 其他说明
该接口暂只提供给「图文消息」草稿调用

### 2. 获取编辑器状态

#### 接口名称
`mp_editor_get_isready`

#### 接口参数
无

#### 返回数据
```js
const res = {
    isReady: true// 编辑器状态是否初始化完毕
    isNew: true// 是否为新编辑器
}
```

#### 调用示例

```js
window.__MP_Editor_JSAPI__.invoke({
    apiName: 'mp_editor_get_isready',   
    sucCb: (res) => {console.log('设置成功', res)}, 
    errCb: (err) => {console.log('设置失败', err)}  
})
```

### 3. 获取全文内容

#### 接口名称
`mp_editor_get_content`

#### 接口参数
无

#### 返回数据
```js
const res = {
   content: '<div>test</div>' // 全文富文本
}
```

#### 调用示例
```js
window.__MP_Editor_JSAPI__.invoke({
    apiName: 'mp_editor_get_content',   
    sucCb: (res) => {console.log('设置成功', res)}, 
    errCb: (err) => {console.log('设置失败', err)}  
})
```
### 其他说明
接口mp_editor_get_isready返回isNew=true的时可调用

### 4. 设置全文内容

#### 接口名称
`mp_editor_set_content`

#### 接口参数

| 参数	         | 类型	            | 是否必填  | 说明								                 	 | 示例                                             |
| ------------- | ---------------- | ------- | -------------------------------------- | ----------------------------------------------- |
| content    | String           |	是	    | 	 需要设置的富文本内容                  |   ```<div>test</div>```         |

#### 调用示例
```js
window.__MP_Editor_JSAPI__.invoke({
    apiName: 'mp_editor_set_content',   
    apiParam: {
        content: '<div>test</div>'
    },
    sucCb: (res) => {console.log('设置成功', res)},  
    errCb: (err) => {console.log('设置失败', err)}  
})

```

#### 其他说明
接口mp_editor_get_isready返回isNew=true的时可调用

### 5. 插入内容

#### 接口名称
`mp_editor_insert_html`

#### 接口参数

| 参数	         | 类型	            | 是否必填  | 说明								                 	 | 示例                                             |
| ------------- | ---------------- | ------- | -------------------------------------- | ----------------------------------------------- |
| html    | String           |	是	    | 	 需要插入文章的富文本内容                  |   ```<div>test</div>```       |
| isSelect    | Boolean           |	否	    | 	 是否选中当前插入的内容，默认为false                 |   false         |

#### 调用示例
```js
window.__MP_Editor_JSAPI__.invoke({
    apiName: 'mp_editor_insert_html',  
    apiParam: {
        html: '<div>test</div>',
        isSelect: false
    },
    sucCb: (res) => {console.log('设置成功', res)},  
    errCb: (err) => {console.log('设置失败', err)} 
})

```

#### 其他说明
接口mp_editor_get_isready返回isNew=true的时可调用

### 6. 设置选区

#### 接口名称
`mp_editor_set_selection`

#### 接口参数

| 参数	         | 类型	            | 是否必填  | 说明								                 	 | 示例                                             |
| ------------- | ---------------- | ------- | -------------------------------------- | ----------------------------------------------- |
| container    | HTMLElement           |	是	    | 	 需要设置的选区               |   ```document.getElementById('test')```       |
| selectAllMsg    | Boolean           |	否	    | 	设置为true，将选区设置为全文,默认为false             |   false         |
| selectBefore    | Boolean           |	否	    | 	设置为true，将选区放在container前，默认选区为container                |   false         |
| selectAfter    | Boolean           |	否	    | 	设置为true，将选区放在container后，默认选区为container           |   false         |

#### 调用示例
```js
window.__MP_Editor_JSAPI__.invoke({
    apiName: 'mp_editor_set_selection',  
    apiParam: {
        container: document.getElementById('test'), 
        selectBefore: true
    },
    sucCb: (res) => {console.log('设置成功', res)},  
    errCb: (err) => {console.log('设置失败', err)} 
})

```

#### 其他说明
接口mp_editor_get_isready返回isNew=true的时可调用

## 四、编辑器事件

### 1. 文章内容发生变化

#### 接口名称
`contentchange`

#### 接口参数
无

#### 调用示例

```js
window.__MP_Editor_JSAPI__.on({ eventName: 'contentchange', callback: () => {
  console.log('this is content change')
}})
```

#### 其他说明
接口mp_editor_get_isready返回isNew=true的时可调用

### 2. 选区发生变化

#### 接口名称
`selectionchange`

#### 接口参数
无

### 返回数据
```js
const selectionInfo = {
    domFragment: selection.domFragment// 获取选区的 HTML 内容
    startPos: selection.startPos, // 获取选区选择相对于视图的起始位置
    endPos: selection.endPos, // 获取选区选择相对于视图的结束位置
    startContainer: selection.startContainer, // 获取选区的起始容器
    endContainer: selection.endContainer, // 获取选区的结束容器
    startOffset: selection.startOffset, // 获取选区的起始偏移量
    endOffset: selection.endOffset // 获取选区的结束偏移量
};

```

#### 调用示例

```js
window.__MP_Editor_JSAPI__.on({ eventName: 'selectionchange', callback: (selection) => {
    console.log('selection change:', selection)；
}})
```

#### 其他说明
接口mp_editor_get_isready返回isNew=true的时可调用