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

If your extension's tag:

• Inserts a block-level element: Extend ve.ce.MWBlockExtensionNode and ve.dm.MWBlockExtensionNode
• Inserts an inline-level element: Extend ve.dm.MWInlineExtensionNode and ve.dm.MWInlineExtensionNode

Custom ContentEditable node

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

Custom DataModel node

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

Custom fragment inspector

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

Custom fragment inspector tool

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

Register your modules

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

ResourceModules

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

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

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