一、概述 | 微信开放文档

# 一、概述

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

# 二、使用

# invoke 调用编辑器接口

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

# on 监听编辑器事件

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<number>	否	2.35:1 封面尺寸裁剪坐标，不填则默认居中裁剪	[x1, y1, x2, y2]（含义请参考下方「裁剪坐标示意图」）
picCrop_1_1	Array<number>	否	1:1 封面尺寸裁剪坐标，不填则默认居中裁剪	[x1, y1, x2, y2]（含义请参考下方「裁剪坐标示意图」）

# 裁剪坐标示意图

# 调用示例

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

# 接口参数

无

# 返回数据

const res = {
    isReady: true// 编辑器状态是否初始化完毕
    isNew: true// 是否为新编辑器
}

# 调用示例

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

# 接口参数

无

# 返回数据

const res = {
   content: '<div>test</div>' // 全文富文本
}

# 调用示例

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>`

# 调用示例

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

# 调用示例

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')`
selectBefore	Boolean	否	设置为true，即将选区放在container前，默认选区为container	false
selectAfter	Boolean	否	设置为true，即将选区放在container后，默认选区为container	false

# 调用示例

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

# 接口参数

无

# 调用示例

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

# 其他说明

接口mp_editor_get_isready返回isNew=true的时可调用

# 2. 选区发生变化

# 接口名称

selectionchange

# 接口参数

无

# 返回数据

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

# 调用示例

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

# 其他说明

接口mp_editor_get_isready返回isNew=true的时可调用