# 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