Formatting Tool

The formatting tool of the Editor provides the option to customize the widget content by means of custom CSS classes and styling, and a CSS file registered in the Editor iframe document.

You can register and import your own CSS file into the content area through the stylesheets option.

Use the tool's name, text and value options to populate the Format dropdown with options. Note that the specified CSS class should exist in the CSS file imported in the content area through the stylesheets attribute.

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

new Vue({
    el: "#vueapp",
    data: {
        htmlText: "<p>Some sample text.</p>",
        stylesheets: ['https://demos.telerik.com/kendo-ui/content/web/editor/editorStyles.css'],
        items: [{
            "text": "Error",
            "value": ".hlError"
        }, {
            "text": "OK",
            "value": ".hlOK"
        }, {
            "text": "Inline Code",
            "value": ".inlineCode"
        }]
    }
})

In this article