How noneditable works

You can create noneditable blocks in Redactor. This means that you will not be able to edit content within the specified HTML markup.

See Noneditable example

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.

Note that even with the noneditable.remove setting turned off, an non-editable block can still be removed if all editor content is selected.

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.