How noneditable works

Redactor supports three types of protected blocks that restrict editing, selection, insertion, and deletion in different ways:

1. Non editable block-wrapper — content inside cannot be edited.
2. Non deletable block — the block cannot be deleted, but its content remains editable.
3. Non editable block — both the block and its content are fully protected.

Each type provides predictable behavior across clicks, selections, keyboard actions, and control menus.

Non Editable Block-Wrapper#

A noneditable block protects its internal content from editing. You can use it to lock layout fragments, embeds, or any pre-rendered elements.

Usage

Markup of non-editable content, is done using the data-block attribute with the value noneditable.

<div data-block="noneditable">
   <h2>...</h2>
   <p>...</p>
</div>

Behavior

• The content inside cannot be edited in any way:
  • no typing
  • no formatting
  • no insertion
  • no deletion
• The cursor cannot be placed inside the block.
• Content can be inserted before or after, but never inside.
• The block itself can still be selected, deleted, or cut — unless disabled via settings.

Settings

remove

By default, you can delete noneditable blocks in the editor. This can be disabled like this:

Redactor('#entry', {
    noneditable: {
        remove: false
    }
});

In this case, when selecting a noneditable block, the Delete command will not be available in the control menu and the block cannot be deleted pressing the Backspace or Delete keys of the keyboard.

select

By default, non-editable blocks are clickable in the editor and different edit and change commands can be applied to them. This can be disabled like this:

Redactor('#entry', {
    noneditable: {
        select: false
    }
});

In this case, clicking on a noneditable block will lead to nothing.

Non Deletable Blocks#

A nondeletable block cannot be removed, but its content remains fully editable. This allows you to keep certain structural elements persistent while still allowing text changes inside.

Usage

On a single block element:

<p data-nondeletable="true">This block cannot be removed</p>

On a wrapper element:

<div data-nondeletable="true">
    <p>Editable content inside...</p>
</div>

With placeholder:

<p data-nondeletable="true" data-placeholder="Type anything...">...</p>

<div data-nondeletable="true">
    <p data-placeholder="Type anything...">...</p>
</div>

Behavior

• The user can edit the content inside: typing, deleting, formatting, inserting text.
• The block cannot be deleted:
  • not with Backspace/Delete,
  • not through the control menu,
  • not via Cut,
  • not when selected together with other content.
• If a user selects a larger range that includes a nondeletable block, deletion is ignored.
• If the block is the only content in the editor, it is never removed.
• Content can be inserted inside the block (for example after pressing Enter in a paragraph).
• The block cannot be split into two separate blocks by pressing Enter. Enter only affects the internal editable content, not the wrapper itself.

Non Editable Blocks#

This mode combines both restrictions: the block cannot be deleted and its content cannot be edited.

Use it for fully protected elements such as pre-rendered components, locked instructions, or imported templates.

Usage

On a single block element:

<p data-noneditable="true">This block cannot be edited</p>

On a wrapper element:

<div data-noneditable="true">
    <p>Non editable content inside...</p>
</div>

Behavior

• The content inside is not editable:
  • no typing,
  • no insertion,
  • no deleting,
  • no formatting.
• The cursor cannot be placed inside the block.
• Nothing can be inserted into the block — only before or after it.
• The context bar does not appear on selection.
• The control bar does not show deletion actions.
• The block itself cannot be deleted by any means.

This creates a fully protected, atomic piece of content.