New to Kendo UI for Vue? Start a free 30-day trial

Editor

Represents the Kendo UI for Vue Editor component.

<template>
  <div>
    <Editor
      :tools="tools"
      :content-style="{
        height: '690px',
      }"
      :default-content="content"
    />
  </div>
</template>

<script>
import { Editor } from "@progress/kendo-vue-editor";
import content from "./content-overview";

export default {
  components: {
    Editor,
  },
  data() {
    return {
      tools: [
        ["Bold", "Italic", "Underline", "Strikethrough"],
        ["Subscript", "Superscript"],
        ["AlignLeft", "AlignCenter", "AlignRight", "AlignJustify"],
        ["Indent", "Outdent"],
        ["OrderedList", "UnorderedList"],
        "FontSize",
        "FontName",
        "FormatBlock",
        ["Undo", "Redo"],
        ["Link", "Unlink", "InsertImage", "ViewHtml"],
        ["InsertTable"],
        ["AddRowBefore", "AddRowAfter", "AddColumnBefore", "AddColumnAfter"],
        ["DeleteRow", "DeleteColumn", "DeleteTable"],
        ["MergeCells", "SplitCell"],
      ],
      content: content,
    };
  },
};
</script>

props Readonly<EditorProps

The props of the Editor component.

contentElement HTMLDivElement

Returns the content-editable DOM element of the Editor.

element HTMLElement

Returns the DOM element of the Editor.

value Node | string

The value of the Editor.

view EditorView<any>

Returns the view object of the Editor.

In this article

Not finding the help you need?