如何限制文本编辑器的内容长度答案

【问题标题】：How to limit the content length of the text editor如何限制文本编辑器的内容长度
【发布时间】：2021-07-04 05:41:15
【问题描述】：

我正在使用 vue3 和 vue3-editor(https://www.npmjs.com/package/vue3-editor) 我认为我应该限制内容的长度，所以我所做的是1image

/**What i did */
      if (this.quill.getLength() > 50) {
        this.quill.deleteText(50, this.quill.getLength());
      }
/*/

我在 vue3-editor.common.js , vue3-editor.umd.js 处添加了这段代码

我什至不知道为什么相同的代码在两个文件中。

如何限制长度，或者vue3有其他简单的基本编辑器吗？

【问题讨论】：

标签： editor text-editor vue-cli vuejs3

【解决方案1】：

您不想更改文件 vue3-editor.common.js 或 vue3-editor.umd.js，因为这些文件是 vue3-editor 的分发文件，每次更新此依赖项时都会被覆盖（通常 不要更改 @987654327 中的任何内容直接@！）

好消息是您不需要这样做，因为 vue3-editor 组件（在内部使用 Quill.js）正在将 text-change 事件从 Quill 路由到您（请参阅 examples）

模板：

<vue-editor ref="editor" v-model="content" @text-change="onTextChange" />

脚本

data() {
  return {
    content: '',
    limit: 50
  }
},
methods: {
  onTextChange() {
    const quill = this.$refs.editor.quill
    const len = quill.getLength()
    if (len > this.limit) {
      quill.deleteText(this.limit, len);
    }
  }
}

虽然在阅读issue 时，我认为这不是您想要的完美解决方案...

【讨论】：