All Components

Tools

The Editor provides a rich set of tools that can be used for editing the content through the <kendo-editor-tool> component.

Available Tools

If you do not define any tools for the Editor, it applies a default toolset for text formatting. For more information on the tools property, refer to the API of the Kendo UI Editor widget.

<div id="vueapp" class="vue-app">
    <kendo-editor :value="htmlText" style="height:280px">
        <kendo-editor-tool :name="'fontName'"></kendo-editor-tool>
        <kendo-editor-tool :name="'fontSize'"></kendo-editor-tool>
        <kendo-editor-tool :name="'formatting'"></kendo-editor-tool>
    </kendo-editor>
</div>
Vue.use(EditorInstaller);

new Vue({
    el: "#vueapp",
    data () {
        return {
            htmlText: "<p>Some sample text.</p>"
        }
    }
})

Custom Tools

The Editor allows you to add custom tools which are defined in the tools array and, in this way, to extend the tools functionality.

<div id="vueapp" class="vue-app">
    <kendo-editor ref="editor" :value="htmlText">
        <kendo-editor-tool :name="'customTemplate'"
                           :template="customTemplate">
        </kendo-editor-tool>
        <kendo-editor-tool :name="'custom'"
                           :tooltip="'Insert a horizontal rule'"
                           :exec="exec">
        </kendo-editor-tool>
    </kendo-editor>
    <script type="text/x-kendo-template" id="backgroundColor-template">
        <label for='templateTool' style='vertical-align:middle;'>Background:</label>
        <select id='templateTool' style='width:90px'><option value=''>none</option><option value='#ff9'>yellow</option><option value='#dfd'>green</option></select>
    </script>
</div>
Vue.use(EditorInstaller);

new Vue({
    el: "#vueapp",
    data () {
        return {
            htmlText: "<p>Some sample text.</p>"
        }
    },
    mounted () {
        var that = this;

        kendo.jQuery('#templateTool').kendoDropDownList({
            change: function (e) {
                var editor = that.$refs.editor.kendoWidget();
                editor.body.style.backgroundColor = e.sender.value()
            }
        })
    },
    methods: {
        customTemplate () {
            return kendo.jQuery('#backgroundColor-template').html()
        },
        exec (e) {
            var editor = this.$refs.editor.kendoWidget();
            editor.exec('inserthtml', { value: '<hr />' });
        }
    }
})
In this article