Mecha CMS

Make the editor API accessible to developers.

Applying custom editors to the control panel fields is as easy as reading the installation documentation page for each editor package. But, for compatibility with other editors, I decided to make some specifications about applying a JavaScript editor to the control panel fields.

1. First, the instance results of each editor on the DOM element must be attached to the DOM itself in the editor.$ property.
2. The editor object must support at least two methods: set and reset. The set method is used to set or refresh the current editor instance with new configuration data, and the reset method will be used to destroy the overall appearance of the editor (e.g. turning it back to the generic <textarea> element).

HTMLTextAreaElement.editor.$: CodeMirror

HTMLTextAreaElement.editor.set(config: object): CodeMirror

HTMLTextAreaElement.editor.get(): HTMLTextAreaElement

HTMLTextAreaElement.editor.reset(): void

As of the current development stage, we have CodeMirror as our default source code editor, and CKEditor as custom page content editor that has been packaged separately as c-k-editor extension.

This is what I mean about attaching editor instances to the DOM node. Each DOM node that has been changed to a custom editor view will be provided with an editor property that you can use to manipulate the existing editor instance:

Example Usage for CodeMirror 

Example Usage for CKEditor 

It’s up to you whether you want to access the DOM node through the native JavaScript document.forms property, or maybe via a jQuery selector like $('textarea[name="page[content]"]').get(0), or maybe with document.getElementById('f:content.2'), or … whatever. Just take the DOM and use its editor property to do something! 😉