I am using the Summernote WYSIWYG editor to provide users with functionality to edit HTML templates, and store changes to a personalised area. To do this I need to POST a set of text fields, along with the edited HTML, to the backend.
All is working as expected, except that the HTML that gets POSTed from the editable DIV, doesn't POST the updated DOM i.e. it's the original HTML template, without the edits.
If I use the browser dev tools console, I can use 'document.documentElement.outerHTML' to see the correctly updated DOM, but when I set a variable to get the outerHTML element by ID, I still only POST the original markup.
The variable within the script is as follows (based upon other StackOverflow answers):
var content = $('#template_text')[0].outerHTML;
As mentioned, this allows me to POST the content of the DIV, but doesn't POST the updates that a user makes to the template.
I have tried using innerHTML, outerHTML, html(), but essentially end up with the same result. If I use document.documentElement.outerHTML within the variable, this POSTs the updated values, but sends the whole document, rather than just the DIV (and I only want the DIV).
Any help would be greatly appreciated.
Instead of manipulating the DOM, We can go with the library's documented way like this,
var editedText = $('#summernote').summernote('code');
Hope this helps!