arrow-down
    1. Overview
    2. Core concepts
    3. Using docs
    4. Intro Videos
    5. Tutorials
    1. Intro
    2. GraphQL API
    3. Media API
    4. Extending the API
    5. Component API
    1. Content Studio
      1. Branches
    2. Layers
      1. Lifecycle
      2. Media
      3. Attachments
      4. X-data
        1. Page templates
        2. Fragments
      5. Variants
      6. Permissions
      7. Versions
    3. Sites
      1. Visual editor
    4. Publishing
    1. Introduction
      1. Controllers
      2. Globals
      3. Events
      4. HTTP Request
      5. HTTP Response
      6. Error handler
      7. Filters
      8. Templating
      9. Localization
      10. Websocket
      11. Tasks
      12. Main controller
      13. Java bridge
      1. Admin Lib
      2. Application Lib
      3. Auditlog Lib
      4. Authentication Lib
      5. Cluster Lib
      6. Common Lib
      7. Content Lib
      8. Context Lib
      9. Event Lib
      10. Export Lib
      11. Grid Lib
      12. I18N Lib
      13. IO Lib
      14. Mail Lib
      15. Node Lib
      16. Portal Lib
      17. Project Lib
      18. Repo Lib
      19. Scheduler Lib
      20. Schema Lib
      21. Tasks Lib
      22. Value Lib
      23. VHost Lib
      24. Websocket Lib
    2. Other Libraries
      1. CLI
      2. Sandboxes
      3. Code
      4. Building
      5. Configuration
      6. TypeScript
    3. Building APIs
      1. Mappings
      2. Components
      3. Processors
      4. Contributions
    4. Building Webapps
      1. ID providers
      2. Admin Apps
      3. Admin Widgets
    1. Architecture
      1. TODO
      1. Navigating
      2. Users
      3. Applications
      4. Data management
      5. System info
      6. Audit Logs
      7. Task management
      1. Portal
      2. IDprovider
      3. Management
      4. Statistics
      1. Nodes and repos
      2. Properties
      3. Indexing
      4. Branches
      5. Editors
      1. DSL Queries
      2. NoQL Queries
      3. Filters
      4. Aggregations
      5. Highlighting
      1. ID providers
      2. System ID provider
      3. Users and groups
      4. Roles
      1. Strategies
      2. Distributions
      3. Docker
      4. Kubernetes
      5. Systemd
      6. Vhosts
      7. Configuration
      8. Backup & restore
      9. Clustering
      10. Observability
      1. Notes
      2. Upgrade
      3. Upgrading Apps
        1. Asset service
        2. HTTP service
        3. Image service
    1. Best practice
        1. AttachmentUploader
        2. Checkbox
        3. Combobox
        4. ContentSelector
        5. ContentTypeFilter
        6. CustomSelector
        7. Date
        8. DateTime
        9. Double
        10. GeoPoint
        11. HtmlArea
        12. ImageSelector
        13. Long
        14. MediaSelector
        15. Radiobutton
        16. Tag
        17. TextArea
        18. TextLine
        19. Time
        1. Field set
        2. Item set
        3. Option set
      1. Mixins
      2. Localization
      3. Styles
    2. Content Types
    3. X-data
    4. Macros
      1. Pages
      2. Regions
      3. Part component
      4. Layout component
      5. Text component
      6. Component Filtering
      7. Component Indexing
    1. Marketplace
    2. Market guidelines

Visual page editor

Contents

Content Studio offers a visual editing mode which is handy when working with pages and components.

Introduction

To support visual editing in Content Studio’s Page Editor, including drag’n drop, the page DOM must include annotations for regions and components.

When using the Enonic framework, editor annotations are automatically injected into your markup.

Region annotations

Regions are represented by an element with the data-portal-region attribute, and a value matching the region name i.e. main.

Sample DOM annotating the main region
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>Hello region</h1>
    <div data-portal-region="main"/>
  </body>
</html>
For an empty region dropzone to appear in the editor, a target element must be provided, like in the example above.

Component annotations

Components must be annotated with a special component-type annotation.

The available values are: layout, part, text, and fragment

Sample DOM annotating two components
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>Hello region</h1>
    <div data-portal-region="main">
      <div data-portal-component-type="text">..</div>
      <div data-portal-component-type="part">..</div>
    </div>
  </body>
</html>

Hierarchies

Using layouts, you may create hierarchies of regions and components. For the page editor to work properly, the component elements must be be hierarchically structured within the page DOM.

The page editor uses this structure to identify the components by path.

Sample DOM structure with nested regions.
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>Hello region</h1>
    <div data-portal-region="main"/>
     <div data-portal-component-type="layout">
        <div data-portal-region="left"/>
        <div data-portal-region="center"/>
        <div data-portal-region="right"/>
     </div>
  </body>
</html>

Contents

Contents

AI-powered search

Juke AI