How to extend a custom editor?

Supported from HBuilderX 2.9.2+

  • Configure contribution points through [customEditors] (/ExtensionDocs/ContributionPoints/README.md#customEditors) and declare custom editors that need to be registered.
  1. //package.json；
  2. //...NOTE：Package.json does not support comments, you need to delete the comments when using the following codes.
  3.     "contributes": {
  4.         "customEditors": [{
  5.             "viewType": "catEdit.catScratch",   // Custom editor type id
  6.             "displayName": "Cat Scratch",
  7.             "selector": [{
  8.                 "fileNamePattern": "*.cscratch" // File name matching pattern
  9.             }],
  10.             "priority": "default"
  11.         },
  12.         ...]
  13.     }

  • Extension inherits from CustomEditorProvider

    HBuilderX uses WebViewPanel as the view of the custom editor. The usage of WebViewPanel can also refer to View Extension Example.

  1. var hx = require("hbuilderx");
  3. // Call Classes
  4. let CustomDocument = hx.CustomEditor.CustomDocument;
  5. let CustomEditorProvider = hx.CustomEditor.CustomEditorProvider;
  6. let CustomDocumentEditEvent = hx.CustomEditor.CustomDocumentEditEvent;
  8. // Inherits CustomDocument
  9. class CatCustomDocument extends CustomDocument {
  10.     constructor(uri) {
  11.         super(uri)
  12.     }
  13.     dispose() {
  14.         super.dispose();
  15.     }
  16. }
  18. // Inherit CustomEditorProvider to implement some methods
  19. class CatCustomEditorProvider extends CustomEditorProvider{
  20.     constructor(context){
  21.         super()
  22.     }
  23.     openCustomDocument(uri){
  24.         // create CustomDocument
  25.         return Promise.resolve(new CatCustomDocument(uri));
  26.     }
  27.     resolveCustomEditor(document, webViewPanel){
  28.         // link CustomDocument and WebViewPanel
  29.     }
  30.     saveCustomDocument(document) {
  31.         // save document
  32.         return true;
  33.     }
  34.     saveCustomDocumentAs(document, destination) {
  35.         // document save to destination
  36.         return true;
  37.     }
  38. }

Custom editor provides new extension activation event onCustomEditor

  1. // package.json declare the type of custom editor that can activate the extension
  2. "activationEvents": [
  3.     "onCustomEditor:catEdit.catScratch"
  4. ]
  1. // extension.js is activation entry
  2. function activate(context) {
  3.     hx.window.registerCustomEditorProvider("catEdit.catScratch", new CatCustomEditorProvider());
  4. }
  • Others
  1. // Send a document change event to HBuilderX, and the editor tab becomes dirty status
  2. provider.onDidChangeCustomDocument.fire(new CustomDocumentEditEvent(document));