How noneditable works

Non-editable and non-deletable blocks#

In Redactor you can create non-editable and non-deletable blocks. To do this, just mark the block with a special data-noneditable attribute, e.g. like this:

<p data-noneditable="true">...</p>

As a result, such a block will be uneditable and cannot be deleted using Delete, Backspace or the dropdown item in the control bar. You can assign an attribute to any block tag in the content: headers, lists etc.

Non-editable wrapper#

You can create a non-editable wrapper for blocks in Redactor. This means that you will not be able to edit content within the specified HTML markup.

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

<textarea id="entry">
    ...
    <div data-block="noneditable">
        <h3>...</h3>
        <p>...</p>
        <p>...</p>
    </div>
    ...
</textarea>

In this case, Redactor will realize that everything inside data-block="noneditable" is non-editable. This applies to any content inside noneditable wrapper, including images, embeds, etc.

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.