Editor Specification for Panel Extension
Table of Content
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.
- First, the instance results of each editor on the DOM element must be attached to the DOM itself in the
editor.$
property. - The
editor
object must support at least two methods:set
andreset
. Theset
method is used to set or refresh the current editor instance with new configuration data, and thereset
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! 😉
0 Comments
No comments yet.