Make Editor Read-Only

Updated on Feb 9, 2026

Environment

Product Version	7.0.2
Product	Progress® Kendo UI for Vue Native

Description

How can I make the Editor component read-only so users can view the content but cannot edit it?

While the Editor component doesn't have a built-in readonly property, you can achieve a read-only state by using CSS to disable user interactions with both the toolbar and the editable content area.

Solution

You can make the Editor read-only by applying CSS that prevents pointer events on the entire Editor component:

css

.k-editor {
  pointer-events: none;
  opacity: 0.6;
}

This CSS approach disables all interactions with the Editor (both toolbar and content area) and reduces opacity to visually indicate the read-only state.

The example below demonstrates an Editor in read-only mode with these CSS rules applied:

Change Theme

Theme

Loading ...

See Also

• Editor Overview
• Editor API