如何使羽毛笔编辑器成为必需的？

Question

如何让quill editor字段成为必填项？编辑器呈现为 div，但不清楚是否有办法在表单提交时使 field/editor 成为必需。

Answer 1

如您所写，Quill 使用 div 而不是表单元素，因此它无法帮助您进行表单验证。您将需要手动检查编辑器的内容是否为空，阻止用户提交表单并显示此字段为必填项的消息。

您可以在提交表单之前将羽毛笔内容复制到隐藏的输入元素，如此 example。

Answer 2

自定义表单控件也是一个不错的选择。您可以尝试使用 Quill 的事件处理程序解决问题并获取表单的值。然后自定义表单验证器也是可能的。

检查：https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

Answer 3

我今天也一直在尝试解决这个问题，使用 Python 作为后端并使用隐藏的表单字段 (name='editor') 从套筒容器到后端。最终不是真正的验证器，但工作大致相同：

if request.form['editor'] == '\"<p><br></p>\"':
    flash("You cannot send in empty posts!")
    return redirect(CURRENT PAGE) 
else:
    CODE EXECUTED IF EDITOR IS NOT EMPTY

不确定您对编辑器的输入做了什么，或者您是否甚至在后端使用 Python，但我希望这对您有所帮助。 "<p><br></p>" 控制台告诉我空提交时的标准输入是从编辑器中获取信息时的内容。

祝你好运！

Answer 4

const yourText = '<div><br></div>';

const htmlTagsToRemove = ['<div>', '</div>', '<br>'];

function removeHtmlTags(data) {
  let text = data;

  htmlTagsToRemove.forEach(it => {
    text = text.replace(it, '');
  });
  return text;
}

const newText = removeHtmlTags(yourText);
console.log(newText);

如何使羽毛笔编辑器成为必需的？

How to make quill editor required?

quill