Applying Max and Min Character Limits in Kendo UI for Vue Editor

Updated on Dec 25, 2025

Environment

Product	Kendo UI for Vue Editor
Version	7.0.2

Description

I want to restrict the Kendo UI for Vue Editor to a specific number of characters. For example, I want to set a maximum character limit of 100 so that users cannot add more than 100 characters to the Editor. The change event should handle this restriction.

This knowledge base article also answers the following questions:

• How to limit the character count in Kendo UI for Vue Editor?
• How to set a maximum character limit in Kendo UI for Vue Editor?
• How to enforce minimum and maximum character limits in Vue Editor?

Solution

To restrict the Kendo UI for Vue Editor to a maximum character limit, handle the change event and control the value based on its length.

Change Theme

Theme

Loading ...

Controlling the Document Value

Use the Editor's controlled document value approach:

vue

<template>
    <div>
        <Editor :value="docValue" @change="onEditorChange" />
    </div>
</template>

<script>
import { Editor } from '@progress/kendo-vue-editor';

export default {
    components: { Editor },
    data() {
        return {
            docValue: '<p>Initial content</p>',
        };
    },
    methods: {
        onEditorChange(event) {
            const maxLength = 100;
            const content = event.value || '';
            if (content.length <= maxLength) {
                this.docValue = content;
            } else {
                alert('Character limit exceeded!');
            }
        },
    },
};
</script>

Using String Value

Alternatively, control the Editor using a plain string value:

vue

<template>
    <div>
        <Editor :value="stringValue" @change="onEditorChange" />
    </div>
</template>

<script>
import { Editor } from '@progress/kendo-vue-editor';

export default {
    components: { Editor },
    data() {
        return {
            stringValue: 'Initial content',
        };
    },
    methods: {
        onEditorChange(event) {
            const maxLength = 100;
            const content = event.value || '';
            if (content.length <= maxLength) {
                this.stringValue = content;
            } else {
                alert('Character limit exceeded!');
            }
        },
    },
};
</script>

See Also

• Editor Overview
• Controlled Value Documentation
• StackBlitz Example: Controlling the Doc Value
• StackBlitz Example: Using String Value