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作为后端，并使用一个隐藏的表单域（名称=“ 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);

如何制作羽毛笔编辑器？

4 个答案: