User:SamanthaNguyen/Extending VisualEditor

This guide is intended to help you integrate with VisualEditor for allowing to insert a custom parser tag that's registered by your extension. This guide is still a draft, so stay tuned.

Extending VisualEditor edit

If your extension's tag:

  • Inserts a block-level element[1]: Extend ve.ce.MWBlockExtensionNode[2] and ve.dm.MWBlockExtensionNode[3]
  • Inserts an inline-level element[4]: Extend ve.dm.MWInlineExtensionNode[5] and ve.dm.MWInlineExtensionNode[6]

Custom ContentEditable node edit

This file should be located at resources/modules/ve-{extension}/ve.ce.MW{Extension}Node.js.

Custom DataModel node edit

This file should be located at resources/modules/ve-{extension}/ve.dm.MW{Extension}Node.js.

Custom fragment inspector edit

This file should be located at resources/modules/ve-{extension}/ve.ui.MW{Extension}Inspector.js.

Custom fragment inspector tool edit

This file should be located at resources/modules/ve-{extension}/ve.ui.MW{Extension}InspectorTool.js.

Register your modules edit

This step, you will be registering your ResourceLoader module in your extension.json file.

ResourceModules edit

First, register your new ResourceLoader module under ResourceModules:

"ResourceModules": {
	"ext.{extension}.visualeditor": {
		"scripts": [
			"resources/modules/ve-{extension}/ve.ce.MW{Extension}Node.js",
			"resources/modules/ve-{extension}/ve.dm.MW{Extension}Node.js",
			"resources/modules/ve-{extension}/ve.ui.MW{Extension}Inspector.js",
			"resources/modules/ve-{extension}/ve.ui.MW{Extension}InspectorTool.js"
		],
		"dependencies": [
			"ext.visualEditor.mwcore"
		],
		"messages": [
			"{extension}-visualeditor-mw{extension}inspector-title"
		],
		"targets": [
			"desktop",
			"mobile"
		]
	}
}

VisualEditorPluginModules edit

Then you must register your ResourceLoader module for VisualEditor via VisualEditorPluginModules:

"VisualEditorPluginModules": [
	"ext.{extension}.visualeditor"
]

References edit