tinmcy富文本编辑 只输入空格校验

原因是文本内容只输入空格,能提交成功,这个富文本编辑提交的内容和普通的输入框提交的内容不一样,不能按照普通的输入框去校验,因为他提交的内容是这样的

那么我们怎么校验呢???

继续往下看

// 按部就班完全没有问题,放在盖房的地方
//替换所有指定字符
replaceAllContent(str, search, replace) {
  return str.replace(new RegExp(search, 'g'), replace);
};
.
.
.

var content = this.replaceAllContent(this.ruleForm.content, ' ', ''); //去除空格
content = content.replace(/[\r\n]/g,''); //去除回车,注意它不能放在后面,只有先去除回车才能进行后面的操作
content = this.replaceAllContent(content, ' ', ''); //去除空格
content = this.replaceAllContent(content, '<p></p>', ''); //去除<p></p>
if(content == "" || content == null || content == '<p></p>') {
  this.$notify({  //不满足条件,弹窗提示
    title: '失败',
    message: '内容不能只输入空格',
    type: 'warning',
  });
    return;
}

这样问题就解决啦~~~~~~~~~~~~~有好的方法 可以回复在评论区

### Quill 富文本编辑器实现空格校验方法 为了实现在Quill富文本编辑器中的空格校验,可以通过监听用户的输入事件并自定义处理逻辑来达到目的。具体来说,在每次用户按键之后检查新加入字符是否为空格,并根据业务需求决定允许或阻止该操作。 当检测到非法空格时(例如连续多个空格),可以选择忽略这些多余的空白符而不将其添加至文档流中;或者提示用户当前输入不符合规定[^1]。 下面是一个简单的例子展示如何通过修改`quill`实例配置完成这一功能: ```javascript // 定义一个用于拦截键盘事件的函数 function handleKeyPress(event, editor) { const { code } = event; // 如果按下的键是Space(空格),则进一步判断前后是否有其他有效字符存在 if (code === 'Space') { let range = editor.getSelection(); // 获取光标位置前后的文本片段 var beforeText = editor.getText(0, range.index); var afterText = editor.getText(range.index + 1); // 这里可以根据实际应用场景调整规则,比如不允许开头结尾处有过多空格等 if (/^\s*$/.test(beforeText.trim()) || /^\s*$/.test(afterText.trim())) { event.preventDefault(); // 阻止默认行为即不插入新的空格 } } } // 初始化Quill编辑器的同时绑定上述处理程序 var quill = new Quill('#editor', { theme: 'snow', }); quill.root.addEventListener('keydown', function(e){ handleKeyPress(e, quill); }); ``` 此代码段展示了如何利用JavaScript原生API以及Quill提供的接口组合起来解决特定场景下的问题——即防止不必要的空格被录入到编辑区内[^2]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值