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


所有评论(0)