vue-quill-editor limits the number of input words

<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);
          }
        }
      }
    }
  }
},
onEditorBlur() {
  // 失去焦点事件
},
onEditorFocus() {
  // 获得焦点事件
},
onEditorChange({ editor, html, text }) {
  // 内容改变事件
  if(this.$refs.ruleForm) {
    this.$refs.ruleForm.validateField("content");
    // this.$forceUpdate()
  }
  let event = this.$refs.myQuillEditor
  event.quill.deleteText(500, 1);
  if(this.ruleForm.content===''){
    this.TiLength = 0
  }
  else{
    this.TiLength = event.quill.getLength() - 1
  }

},

Guess you like

Origin blog.csdn.net/GrootBaby/article/details/125818950