summernote富文本编辑器配合validate表单验证无法进行表单提交的问题

1.使用summernote富文本编辑器提交图片到服务器

  在使用bootstrap中,我们用到了summernote富文本编辑器,使用summernote将图片上传到服务器中,参考我的上篇文章http://www.cnblogs.com/jingmin/p/6592325.html

 

 

2.在使用summernote编辑完文本,使用validate进行表单验证出现问题的解决方案

  小编在使用summernote富文本编辑器编辑完文章内容,并且上传了图片,对于编写的内容使用了validate进行了表单验证,结果发现表单无法提交。

 

html代码:

 

<form method<
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果需要对富文本编辑器中的内容长度进行验证,可以使用 `el-form` 表单组件内部的 `validate` 方法结合富文本编辑器组件的 `getContentLength` 方法来实现。 具体地,假设我们使用了 `vue-quill-editor` 富文本编辑器组件,以下是一个实现富文本内容长度验证的示例代码: ``` html <template> <div> <el-form :model="form" ref="form" :rules="rules"> <el-form-item label="富文本内容"> <quill-editor v-model="form.content" ref="editor"></quill-editor> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('form')">提交</el-button> </el-form-item> </el-form> </div> </template> <script> import { quillEditor } from 'vue-quill-editor' export default { components: { quillEditor }, data() { return { form: { content: '' }, rules: { content: [ { required: true, message: '请输入内容', trigger: 'blur' }, { validator: this.checkContentLength, trigger: 'blur' } ] } } }, methods: { checkContentLength(rule, value, callback) { const length = this.$refs.editor.getContentLength() if (length > 1000) { callback(new Error('内容长度不能超过 1000 字符')) } else { callback() } }, submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { console.log('submit!'); } else { console.log('error submit!!'); return false; } }); } }, mounted() { this.$refs.form.resetFields(); } } </script> ``` 在该示例代码中,我们首先引入了 `vue-quill-editor` 组件,并在 `el-form` 表单组件中使用 `quill-editor` 组件作为富文本编辑器。在表单组件的 `rules` 中,我们定义了一个 `validator` 规则,调用 `checkContentLength` 方法对富文本内容长度进行验证。在 `checkContentLength` 方法中,我们使用 `$refs` 属性获取到富文本编辑器组件实例,并调用其内部的 `getContentLength` 方法获取富文本内容的长度,最后根据长度判断是否超过限制。 当用户输入的富文本内容长度超过限制时,会弹出提示信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值