Save content from Quill editor "wysiwyg"

Question

I’m building a posting page I’m having a hard time implementing when picking up content.

• Quill
• Publisher

Thanks in advance for your help!

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<!--Função que manda o conteúdo da div para a textarea com o clique do botão-->
<script>
    $(() => {
        $('#saveDelta').click(() => {
            var valorDaDiv = $("#editor")
            $("#post").val(valorDaDiv)
        })
    })
</script>
<!--div que contem o valor a ser repassa a textarea-->
<div id="editor" class="texteditor"><b>Digite o texto aqui!</b></div> <br>
<!-- form que com o botão que pega o conteúdo da div atualiza a textarea e salva no banco -->
<form action="/admin/novo_post" id="post" method="POST">
    <textarea name="post" id="post" cols="30" rows="10"></textarea>
    <br>
    <button type="submit" id="saveDelta">Salvar</button>
</form>
<!--Quando retiro o form atualiza a textarea mas não salva no banco com o form o conteúdo da div não vem e salva a textarea no banco em branco-->
<script>
  var quill = new Quill('#editor', {
    theme: 'snow'
  });
</script>

Answer 1

You’re using the same id="post" both in the form and in the textarea. Exchange the form id for id="form", and the type of the button by button.

Take the HTML from the editor with $(".ql-editor").html(). The class .ql-editor refers to the editable div created by the plugin. Use a setTimeout to give a short delay before submitting the form, to first add the editor’s HTML to the textarea.

It will look like this HTML:

<form action="/admin/novo_post" id="form" method="POST">
    <textarea name="post" id="post" cols="30" rows="10"></textarea>
    <br>
    <button type="button" id="saveDelta">Salvar</button>
</form>

And the JS:

$(() => {
   $("#saveDelta").click(function(){
      var valorDaDiv = $(".ql-editor").html();
      $("#post").val(valorDaDiv);
      setTimeout(()=>{
         $("#form").submit();
      }, 50);
   });
});