<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
  }

},

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐