如何扩展一个自定义编辑器?
从HBuilderX 2.9.2及以上版本开始支持
- 通过 customEditors 配置扩展点,声明需要注册的自定义编辑器。
//package.json;
//...NOTE:package.json不支持注释,以下代码使用时需要将注释删掉
"contributes": {
"customEditors": [{
"viewType": "catEdit.catScratch", // 自定义编辑器类型id
"displayName": "Cat Scratch",
"selector": [{
"fileNamePattern": "*.cscratch" // 文件名匹配模式
}],
"priority": "default"
},
...]
}
插件代码继承CustomEditorProvider等
HBuilderX使用WebViewPanel来作为自定义编辑器的视图,WebViewPanel的用法也可以参考视图扩展中部分示例。
var hx = require("hbuilderx");
// 引入主要的类
let CustomDocument = hx.CustomEditor.CustomDocument;
let CustomEditorProvider = hx.CustomEditor.CustomEditorProvider;
let CustomDocumentEditEvent = hx.CustomEditor.CustomDocumentEditEvent;
// 继承CustomDocument
class CatCustomDocument extends CustomDocument {
constructor(uri) {
super(uri)
}
dispose() {
super.dispose();
}
}
// 继承CustomEditorProvider,实现必要的方法
class CatCustomEditorProvider extends CustomEditorProvider{
constructor(context){
super()
}
openCustomDocument(uri){
// 创建CustomDocument
return Promise.resolve(new CatCustomDocument(uri));
}
resolveCustomEditor(document, webViewPanel){
// 关联CustomDocument与WebViewPanel
}
saveCustomDocument(document) {
// 保存document
return true;
}
saveCustomDocumentAs(document, destination) {
// document另存为至destination
return true;
}
}
- 在插件激活时通过API:window.registerCustomEditorProvider注册上面扩展的自定义编辑器
自定义编辑器提供了新的插件激活事件onCustomEditor
// package.json 申明可以激活插件的自定义编辑器类型
"activationEvents": [
"onCustomEditor:catEdit.catScratch"
]
// 插件激活入口, 通常是extension.js文件
function activate(context) {
hx.window.registerCustomEditorProvider("catEdit.catScratch", new CatCustomEditorProvider());
}
- 其他
// 在合适的位置向HBuilderX发送文档变动事件,编辑器标签卡变为dirty状态
provider.onDidChangeCustomDocument.fire(new CustomDocumentEditEvent(document));