Currently, I can dynamically create a new Ace Editor and append it to a container div as so:
editorsOnScreen++;
$("#container").append(`<div class="questionContainer w-100"
id="questionContainer_` + editorsOnScreen + `" >
<div class="editor" id="editor_` +
editorsOnScreen + `">//Code Here</div>
</div>`);
I can then configure those Ace Editors individually by referencing their ID using the incrementing variable:
var editor = ace.edit("editor_" + editorsOnScreen);
//Perfrom configuration here.
If a user leaves the page, I want to be able to save all of the editors on the screen to reshow them next time, so I use localStorage
to save the innerHTML
of the container div
where they are stored:
localStorage.setItem("divHtml", $("#container").html();
I do this with the intention of then replacing the HTML of the container div
with the HTML I previously stored the next time the page is loaded.
This is where the problem comes in. I would expect the HTML saved at the key divHTML
to be the following:
<div class="questionContainer w-100" id="questionContainer_` + editorsOnScreen + `" >
<div class="editor" id="editor_` + editorsOnScreen + `">//Code Here</div>
</div>
But, instead, it looks exactly like this (I'm using the three dots because it goes on for lines, and those X's really do come out when I use console.log
):
<div class="questionContainer w-100" id="questionContainer_` + editorsOnScreen + `" >
<div class="editor ace_editor ace-vibrant-ink ace_dark" id="editor_2">
<textarea class="ace_text-input" wrap="off" autocorrect="off"
autocapitalize="off" spellcheck="false" style="opacity: 0;">
</textarea><div class="ace_gutter" aria-hidden="true"><div
class="ace_layer ace_gutter-layer ace_folding-enabled"></div><div c
class="ace_gutter-active-line"></div></div><div class="ace_scroller"
style="left: 0px; right: 0px; bottom: 0px;"><div
class="ace_content"><div class="ace_layer ace_print-margin-layer">
<div class="ace_print-margin" style="left: 4px; visibility: hidden;
...
overflow:
visible;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</div></div></div></div>
I do however find that I get the exactly the results I expect when I don't include any JavaScript or jQuery to configure the editors.
Why would that happen? How can I go about saving the HTML of the container div
of which all of the editors are children so that I can easily just replace its HTML with the saved data on the next load of the page?
Thank you.