vue-quill-editor富文本编辑器限制字符长度
时间: 2023-08-28 12:08:15 浏览: 206
可以通过监听 `text-change` 事件,获取编辑器中内容的长度,然后进行限制。下面是一个简单的实现:
1. 在 `vue-quill-editor` 组件上添加 `@text-change` 监听器:
```html
<template>
<div>
<quill-editor v-model="content" @text-change="handleTextChange" />
</div>
</template>
```
2. 在 `methods` 中实现 `handleTextChange` 方法,对内容长度进行限制:
```js
<script>
export default {
data() {
return {
content: '',
maxLength: 100 // 最大允许输入的字符数
}
},
methods: {
handleTextChange({ text }) {
const length = text.trim().length
if (length > this.maxLength) {
// 超过最大长度,截取前面的内容
this.content = text.trim().substr(0, this.maxLength)
}
}
}
}
</script>
```
这样,当编辑器中输入的文字长度超过设定的最大长度时,就会自动截取前面的内容,保证输入的长度不会超过规定的最大长度。
阅读全文
相关推荐


















