The Editor Core client library provides all the base objects and concepts to support authoring of content resources.
NB: At the moment the Editor only supports
In the repository, the code is located under
The corresponding client library category is
All the relevant JS objects and classes are accessible under the
The Editor Core represents a foundation upon which specific Editors are built, like for instance:
- The Sites Page Editor, defined in
- The Sites Template Editor, defined in
The Editor operates on a content resource determined by the URL suffix (cf. editor.html/path/to/the/content.html).
The Editor user interface is composed of the following elements:
Granite.author.ContentFrame, wrapper of the content page to be authored
Granite.author.EditorFrame, wrapper of the Editor specific elements
Granite.author.ui.globalBar, the Editor header bar
Granite.author.ui.SidePanel, aside of the EditorFrame
Granite.author.ui.assetFinder, to search for Assets to be inserted into the content page
Granite.author.ui.componentBrowser, to search for Components to be inserted into the content page
Each component included by the content page will result in a
Granite.author.Editable entity that is used in the Editor to perform any kind of operation.
The Editor stores all Editables under
Editables are JS data structures holding a link to the component instance they represent and containing the edit configuration coming from the corresponding component; they are represented by
Granite.author.ui.Overlay elements in the EditorFrame to allow user interaction.
For instance, when a user clicks an Overlay, the
Granite.author.ui.Toolbar shows up and offers the different actions available to be performed on the Editable.
The Editor uses the concept
Granite.author.Layer to encapsulate features related for a given purpose.
The default Layers include:
Granite.author.edit.Layer, providing general "edit" operations on the content
Granite.author.PreviewLayer, providing a quick preview of the authored content
Layers contain the configuration needed to tailor the different modules to their needs; so for instance, the Edit Layer comes with:
Granite.author.edit.Overlay, to enable drag and drop on Overlays
Granite.author.edit.Toolbar, to perform Actions on Editables
Granite.author.edit.EditableActions, providing the low-level actions (CRUD) on Editables
Granite.author.edit.ToolbarActions, providing the high-level actions on Editables