如何制作羽毛笔编辑器？

Question

如何使quill编辑器字段成为必需？编辑器被渲染成div，但是不清楚是否有一种方法可以在表单提交时使字段/编辑器成为必需。

Answer 1

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

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

Answer 2

自定义表单控件也是一个很好的方法。您可以尝试使用Quill的事件处理程序解决方法并获取表单的值。然后也可以使用自定义表单验证器。

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

Answer 3

我今天也一直试图解决这个问题，使用Python作为后端，使用隐藏的表单字段（name ='editor'）来获取从quill容器到后端的值。结束时实际上并不是真正的验证器，但工作方式相同：

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);