RealObjects Nimbudocs Editor 2.5.3885_Beta5

Guide: Restricted Editing


Introduction

All edit operations in Nimbudocs Editor are enabled for all elements of the document by default. But there are situations where it is necessary to disable a specific number of operations (mostly all) for specific elements of the document. In Nimbudocs Editor this functionality is called "restricted editing" and can be controlled via CSS.

CSS Syntax

Nimbudocs Editor provides two properties to mark ranges of a document as "editable" or "not editable". The properties are -ro-editable and -ro-editable-inside. The difference between both properties is which area of the DOM is affected by the specified editability state. As both properties are inheritable properties, this state will also be inherited.

In the following diagram the orange node has set -ro-editable to false. As a result, all areas highlighted with red circles are marked as "read-only".

In the following example the orange node has set -ro-editable-inside to false. All areas highlighted with red circles are marked as "read-only".

The difference between the two examples is that in the second one all areas except the node itself are marked as "read-only".

Using these two properties it is possible to arbitrarily nest areas with differing editability states within each other. For example it is possible to create a read-only table, inside an editable div, inside a read-only ol ,inside an editable div and so on.<

Property descriptions

-ro-editable
Value: true | false | no-deletion
Initial: true
Applies to: all elements
Inherited: yes
Percentages: N/A
Media: all
Computed value: as specified

This property defines whether an element and all its descendants are editable, not editable (read-only) or can be edited, but not deleted. How this property is evaluated depends on the operation. If an operation is not a deletion operation then, no-deletion is equivalent to true. If an operation is a deletion operation, then no-deletion is equivalent to false.

-ro-editable-inside
Value: true | false | no-deletion
Initial: true
Applies to: all elements
Inherited: yes
Percentages: N/A
Media: all
Computed value: as specified

This property describes whether all descendants of an element are editable, not editable (read-only) or can be edited, but not deleted. How this property is evaluated depends on the operation. If an operation is not a deletion operation, then no-deletion is equivalent to true. If an operation is a deletion operation, then no-deletion is equivalent to false.

If an element is either not editable or not deletable then all ancestors of this element are automatically not deletable. This descendant dependency is necessary in order to ensure that an undeletable element can not be deleted by deleting an editable ancestor.

If an element is not deletable then it must be ensured on the application side that all style sources (e.g. classes or attributes) which enforce that this element is undeletable are removed from clones of that element. Otherwise it would be possible to insert elements into the document which can not be deleted anymore. In other words, undeletable elements should only be inserted and removed by the application, not by users.

JavaScript API

The JavaScript API method setIgnoreReadOnly can be used to specify whether the following JavaScript API calls should respect or ignore the CSS properties -ro-editable and -ro-editable-inside. If this flag is set to true, then JavaScript API calls will always be performed even if they affect elements that are marked as read-only. The default value is false. This functionality can be used for example to allow an application to perform special document mutations for elements which are "read-only" from the user's point of view.

Edit Operations

Each edit operation evaluates the editability state in a particular granularity. Some operations are finely grained while others are coarsely grained. Each operation supports at least the document root as the finest granularity. The following table shows for all operations the corresponding granularity.

Operation Granularity
Inline operations Paragraph
Paragraph operations Paragraph
Container operations Container
List operations Top level list
Table operations Table
All other operations Document root