# I. Overview
In order to unify the third-party plug-in capabilities and jointly promote the ecological development of the public platform content, part of the capabilities of the mp editor page are now mounted in the form of jsApi on the pagewindow.__MP_Editor_JSAPI__
object for third-party plug-ins.
# II. Use
# Invoke the compiler interface
window.__MP_Editor_JSAPI__.invoke({
apiName: 'mp_editor_change_cover', // 接口名称
apiParam: {...}, // 接口参数
sucCb: (res) => {console.log(res)}, // 接口调用成功回调
errCb: (err) => {console.log(err)} // 接口调用失败回调
});
# On Listening to Compiler Events
window.__MP_Editor_JSAPI__.on({
eventName: 'mp_editor_change_cover', // 事件名称
callBack: (param) => {console.log(param)} // 事件回调
});
# III. Editor Interface
# 1. Modify the cover of the article
# Interface Name
mp_editor_change_cover
# Interface parameters
parameter | type | Is it compulsory? | Introductions | Example |
---|---|---|---|---|
oriImgUrl | String | yes | Original cover photo http link | 'https://mmbiz.qpic.cn/mmbiz_jpg/xxxx' |
picCrop_235_1 | Array|no | 2.35: 1 Cover size crop coordinates, default center crop when not filled | [x1, y1, x2, y2] (For meaning, please refer to "Crop coordinates for intent" below) | |
picCrop_1_1 | Array|no | 1: 1 Cover size crop coordinates, default center crop when not filled | [x1, y1, x2, y2] (For meaning, please refer to "Crop coordinates for intent" below) |
# The crop coordinates show a plot
# Example call
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)} // 失败回调
});
# Other Notes
This interface is provided for the time being only for draft text message calls
# 2. Get the Editor Status
# Interface Name
mp_editor_get_isready
# Interface parameters
nothing
# Return data
const res = {
isReady: true// 编辑器状态是否初始化完毕
isNew: true// 是否为新编辑器
}
# Example call
window.__MP_Editor_JSAPI__.invoke({
apiName: 'mp_editor_get_isready',
sucCb: (res) => {console.log('设置成功', res)},
errCb: (err) => {console.log('设置失败', err)}
})
# 3. Get the full text
# Interface Name
mp_editor_get_content
# Interface parameters
nothing
# Return data
const res = {
content: '<div>test</div>' // 全文富文本
}
# Example call
window.__MP_Editor_JSAPI__.invoke({
apiName: 'mp_editor_get_content',
sucCb: (res) => {console.log('设置成功', res)},
errCb: (err) => {console.log('设置失败', err)}
})
# Other Notes
Interface mp_editor_get_isready returns isNew = true
# 4. Set the full text
# Interface Name
mp_editor_set_content
# Interface parameters
parameter | type | Is it compulsory? | Introductions | Example |
---|---|---|---|---|
content | String | yes | Rich text content to set | <div>test</div> |
# Example call
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)}
})
# Other Notes
Interface mp_editor_get_isready returns isNew = true
# 5. Insert content
# Interface Name
mp_editor_insert_html
# Interface parameters
parameter | type | Is it compulsory? | Introductions | Example |
---|---|---|---|---|
html | String | yes | You need to insert rich text content for the article | <div>test</div> |
isSelect | Boolean | no | Whether to check what is currently inserted, defaults to false | false |
# Example call
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)}
})
# Other Notes
Interface mp_editor_get_isready returns isNew = true
# 6. Set up a constituency
# Interface Name
mp_editor_set_selection
# Interface parameters
parameter | type | Is it compulsory? | Introductions | Example |
---|---|---|---|---|
container | HTMLElement | yes | The constituencies that need to be set up | document.getElementById('test') |
selectAllMsg | Boolean | no | Set to true, set the selection to full text, default to false | false |
selectBefore | Boolean | no | Set to true, place the selection in front of the container, the default selection is container | false |
selectAfter | Boolean | no | Set to true, put the selection after the container, the default selection is container | false |
# Example call
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)}
})
# Other Notes
Interface mp_editor_get_isready returns isNew = true
# IV. Editor Events
# 1. The content of the article has changed
# Interface Name
contentchange
# Interface parameters
nothing
# Example call
window.__MP_Editor_JSAPI__.on({ eventName: 'contentchange', callback: () => {
console.log('this is content change')
}})
# Other Notes
Interface mp_editor_get_isready returns isNew = true
# 2. A change in constituency
# Interface Name
selectionchange
# Interface parameters
nothing
# Return data
const selectionInfo = {
domFragment: selection.domFragment// 获取选区的 HTML 内容
startPos: selection.startPos, // 获取选区选择相对于视图的起始位置
endPos: selection.endPos, // 获取选区选择相对于视图的结束位置
startContainer: selection.startContainer, // 获取选区的起始容器
endContainer: selection.endContainer, // 获取选区的结束容器
startOffset: selection.startOffset, // 获取选区的起始偏移量
endOffset: selection.endOffset // 获取选区的结束偏移量
};
# Example call
window.__MP_Editor_JSAPI__.on({ eventName: 'selectionchange', callback: (selection) => {
console.log('selection change:', selection);
}})
# Other Notes
Interface mp_editor_get_isready returns isNew = true