Editor Core

Editor Core

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 cq:Page resources.

In the repository, the code is located under /libs/cq/gui/components/authoring/editors/clientlibs/core
The corresponding client library category is cq.authoring.editor.core

All the relevant JS objects and classes are accessible under the Granite.author namespace.

The Editor Core represents a foundation upon which specific Editors are built, like for instance:

  • The Sites Page Editor, defined in cq.authoring.editor.sites.page
  • The Sites Template Editor, defined in cq.authoring.editor.sites.template

Concepts

The Editor operates on a content resource determined by the URL suffix (cf. editor.html/path/to/the/content.html).

Core Modules

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

Editables

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 Granite.author.editables.

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.

Layers

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

Useful links