Configuration

By default eZ Publish Style Editor is configured for the Website Interface and eZ Flow extensions. However you can provide your own configuration for DOM structure. In order to change configuration edit following file:

extension/ezstyleeditor/design/standard/templates/styleeditor/visual.tpl

Configuration is provided in the JSON format and stored in the eZ Publish Style Editor variable YAHOO.ez.StyleEditor.elements. It is an array of objects which format is as follows:

{
    selector: "",
    group: "",
    groupname: "",
    alias: "",
    element: {
        name: "body",
        id: "",
        classname: ""
    },
    overlay: true
}

Property

Description

selector

This is a CSS selector

alias

This is a human readable alias for editable DOM element

group

This is a group identifier. When defined, a new group will be created. Use with "groupname" to add a human readable name.

groupname

This defines a human readable groupname available for end-users in the Elements menu.

element

This is an editable DOM element:

Property	Description
name	DOM element name
id	DOM element ID
classname	Dom element CSS classname

overlay

When set to "true" the style editor will draw a red line around an editable DOM element.

Following example defines a group configuration for a custom tag called “Quote”:

{
    group: "customtags",
    groupname: "Custom tags",
    alias: "Quote",
    elements: [
                  {
                      selector: "div.quote",
                      alias: "open-quote",
                      element: {
                                   name: "",
                                   id: "",
                                   classname: ""
                               },
                      overlay: false
                  },
                  {
                      selector: "div.quote-design",
                      alias: "close-quote",
                      element: {
                                   name: "",
                                   id: "",
                                   classname: ""
                               },
                      overlay: false
                  }
              ],
    overlay: false