How to make quill editor required?

问题

How to make the quill editor field required? The editor gets rendered into a div, but it isn't clear if there is a way to make the field/editor required when the form submits.

回答1:

As you wrote, Quill works with a div and not with a form element so it can't help you with form validation. You'll need to check manually if the editor's content is empty, prevent the user from submitting the form and show a message that this field is required.

You can copy quill contents to a hidden input element before submitting the form as shown in this example.

回答2:

A custom form control is also a good way to go. You can try to workaround with Quill's event handler and getting the value of the form. Then a custom form validator is also possible.

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

回答3:

I've been trying to work around exactly this problem too today, using Python for back-end and a hidden form-field (name='editor') to get the value from the quill container to the back-end. Ended up with not actually really a validator but working about the same:

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

Not sure what you're doing with the input on the editor or whether you're even using Python for backend but I hope this helps. "<p><br></p>" is what the console told me the standard input on empty submission was when getting the information out of the editor.

Good luck!

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

来源：https://stackoverflow.com/questions/43946620/how-to-make-quill-editor-required

标签

quill