Get the markdown contents of toast-ui/editor into an html field for POST

Question

I can get the toast-ui/editor to render. I just can't connect it to the form submit.

In my app.js I have this where I am loading the component and adding a listener to catch the form submit and pass the value to a hidden field #content

const editor = new Editor({
  el: document.querySelector('#editor'),
  height: '600px',
  initialEditType: 'markdown',
  placeholder: 'Placeholder',
})

$(document).on("submit", "form", function(event) {
    document.querySelector('#content').value = editor.getMarkdown();
    $(window).off('beforeunload');
  });

I am trying to catch that data in a hidden input

<div id="editor"><div>
<input type="hidden" name="content" id="content">

But it is not getting there before submit. I think it is the on('submit..... section of my javascript is the issue, but I am not sure what I am doing wrong there.

Answer 1

The issue is that the hidden input field was within the same div as the editor div. It does something to the parent div that gets rid of the other tags in the same parent.

Also, for some reason adding value to the input doesn't put it in the value field but appends it after the field. Don't know why.

<textarea class='hidden' name="content" id="content">{{ old("content")}}</textarea>
<div>
  <div id="editor"><div>
</div>