Xeditor offers a lot of configuration options meaning it can easily be adjusted to your needs. However, for now we will simply start with a basic configuration covering most basic options.

Basic Xeditor configuration

For a basic configuration, we have to do the following:

1. Open the file /src/js/config/attributes.js
2. Uncomment its content, it should then look like this:

module.exports = {
	accordionConfigOverride: {
		width: 300,
		maxWidth: 300,
		minWidth: 300
	},
	attributeFieldSetWidthDecrease: 37,
	attributeFieldWidthDecrease: 37,
	enableValidatorTextRequired: true,
	enableSpellCheckerBrowser: false,
	enableContextMenuStructureMenu: true,
	enableSelectionClass: true,
	enableStatusBar: false,
	enableAutoSelectWholeNode: true,
	enableEditorCursorHandling: true,
	enableLegacySelectionHandling: false,
	waitMessageTarget: Ext.getBody(),
	localDatabaseName: 'xeditor_database',
	insertMenuShortcut: {
		keyCode: 32,
		shiftKey: false,
		ctrlKey: true,
		altKey: false
	},
	stopInputShortcut: {
		keyCode: 27,
		shiftKey: false,
		ctrlKey: false,
		altKey: false
	},
	schema: 'default@0.0'
};

3. Open the file /src/js/config/urls.js
4. Uncomment its content, it should then look like this:

module.exports = {
	licenseURL: '/license.txt',
	iframeURL: '/iframe.html',
	imagesURL: BLACKBOX_URL + '/custom/editor/images',
	videosURL: BLACKBOX_URL + '/custom/editor/videos',
	emptyGifURL: '/img/editor/0.gif'
};

Basic toolbar configuration

For the most basic toolbar configuration, without any custom buttons, proceed as follows:

1. Open the file /src/js/config/toolbar.js
2. Add the following content

module.exports = {
	createToolbarConfig: function(editor) {
		return [
			'xeditor.save',
			'xeditor.copy',
			'xeditor.cut',
			'xeditor.paste',
			'xeditor.undo',
			'xeditor.redo'
		];
	}
}

3. Open the file /src/js/config/external_toolbar.js
4. Add the following content

module.exports = {
	createExternalToolbarConfig: function(editor) {
		return {
			type: 'menu',
			items: [
				{
					text: 'Menu 1',
					items: [
						// drop down entries
					]
				}, {
					text: 'Menu 2',
					items: [
						// drop down entries
					]
				}
			]
		};
	}
}

A more detailed description on how to configure your toolbar can be found here.

Start up

Now that we've set everything up, it's time to give our configuration a try and check it out! To do so, just open up a console of your choice, navigate into your Xeditor project, and execute the following command:

npm run start:develop

This will:

• build the Xeditor application using your configuration files
• start a development server used for serving Xeditor
• start up our middleware server
• start a demo server used for serving files

Open up a browser of your choide and go to http://localhost:7070/ in order to open Xeditor.

Next steps

Now that we are able to load our documents, edit them in Xeditor, and save them, it's time to look into further configuration steps. We prepared a couple of tutorials that should give you a feeling on how to adjust Xeditor to your needs. We cover topics like

• setting up a custom toolbar
• adjusting the styling of your document
• setting up proper plugin configurations
• how to add custom functionalities like custom services
• and many more!

Just check out our basic and advanced guides.