需求
新闻编辑的表单--正文项,需要用到富文本编辑器,并且需要要求富文本为必填项
解决方案
使用富文本编辑器
vue-html5-editor,用法以及相关配置请点击这里
将此编辑器引用到表单页中,如下效果
html代码:
<el-form-item label="正文" prop="content">
<ch-editor :content='formData.content' @change="getRichContent"></ch-editor>
</el-form-item>
将表单值绑定到content中,并添加change事件
js代码:
getRichContent(e) {
this.formData.content = e
},
js代码主要作用是每次修改的时候去动态的修改当前表单绑定的值,这样子就可以达到和普通vue表单验证一样的效果!
最终效果如下:
