All Components

Modes

Depending on the element from which you create the Editor, the component assumes either its classic mode or the inline mode.

Classic Mode

By default, the Kendo Editor is initialized in its classic mode. A hidden <textarea> element is placed on the page and holds the widget value. You can type in the contenteditable iframe that is created.

The classic Editor posts its value automatically because it is based on a form element. The tools of the Editor are always visible. Its content does not reside on the main web page and the styling of the page does not influence the editable content. To apply custom styles to the editable content, inject them through the configuration of the Editor.

<div id="vueapp" class="vue-app">
    <kendo-editor style="height:280px"></kendo-editor>
</div>
Vue.use(EditorInstaller);

new Vue({
    el: "#vueapp"
})

Inline Mode

When in inline mode, the Editor uses a content-editable <div> element to display and return its value.

The inline Editor does not post its value. Posting the value of an inline Editor is a matter that you need to take care of. The tools of the Editor are only visible when the widget is focused. Its content resides on the main web page and the styling of the page influences the editable content.

It is recommended to use the inline Editor mode on iOS devices because the iOS Safari browser provides limited iframe support.

<div id="vueapp" class="vue-app">
    <kendo-editor :tag="'div'">
        <h2>
            Comprehensive HTML5/JavaScript framework <br />
            for modern web and mobile app development
        </h2>
        <p>
            Kendo UI is everything professional developers need
            to build HTML5 sites and mobile apps. Today, productivity
            of an average HTML/jQuery developer is hampered by
            assembling a Frankenstein framework of disparate
            JavaScript libraries and plug-ins.
        </p>
        <p>
            Kendo UI has it all: rich jQuery-based widgets,
            a simple and consistent programming interface,
            a rock-solid DataSource, validation, internationalization,
            a MVVM framework, themes, templates and the list goes on.
        </p>
    </kendo-editor>
</div>
Vue.use(EditorInstaller);

new Vue({
    el: "#vueapp"
})
In this article