vue-quill-editor 限制输入字数

最新推荐文章于 2024-04-28 22:30:00 发布

_格鲁特宝宝

最新推荐文章于 2024-04-28 22:30:00 发布

阅读量3.7k

点赞数 2

分类专栏： Vue Element UI Web FrontEnd 文章标签：大数据 quill-editor quill 限制字数 editor 限制输入字数

_格鲁特宝宝原创，转载请务必注明出处

本文链接：https://blog.csdn.net/GrootBaby/article/details/125818950

版权

本文介绍如何在Vue项目中利用vue-quill-editor组件限制用户输入的文字字数，实现编辑器内容长度控制，确保数据合规性。

摘要由CSDN通过智能技术生成

<quill-editor
  v-model="ruleForm.content"
  ref="myQuillEditor"
  class="form-quill-editor"
  :options="editorOption"
  @blur="onEditorBlur($event)"
  @focus="onEditorFocus($event)"
  @change="onEditorChange($event)"
>
</quill-editor>
<div style="text-align:right;margin-right:10px;color: #909399;">
  {
  {TiLength}}/500
</div>

TiLength: 0,
// 富文本 配置项
editorOption: {
  placeholder: "",
  theme: "snow", // or 'bubble'
  modules: {
    toolbar: {
      container: toolbarOptions, // 工具栏
      handlers: {
        image: function(value) {
          if (value) {
            document.querySelector("#quill-upload input").click();
          } else {
            this.quill.format("image", false);
          }
        }
      }
    }
  }
}