Как сохранить содержимое редактируемого div как другой файл HTML?

Question

Я хочу иметь возможность загружать в HTML из файла в редактируемый div, а затем по нажатию кнопки. Сохраните отредактированный html из div как отдельный html-файл.

Я пробовал:

*var textConvert = $('#editor').html($('textarea').html().replace(/\n/g, "<br />"));

Однако это решение не работает. Он создал объект, но это был огромный беспорядок. Javascript загружает HTML-файл в div в виде текста. Тем не менее, я хочу иметь возможность получить HTML после того, как пользователь редактирует содержимое div.

Код:

<div class="center">
         <div id="editor" contenteditable></div>
         <textarea name="ticketDesc" id="editorCopy" required="required" style="display:none;"></textarea>
</div> 



<script type="text/javascript">
        $('#select_section').change(function() {
            var $option = $(this).find('option:selected');
            var value = $option.val();
            var text = $option.text();
            if(value == 1){
                $("#editor").load("1.html");
            }
            if(value == 2){
                $("#editor").load("2.html");
            }
            if(value == 3){
                $("#editor").load("3.html");
            }
            if(value == 4){
                $("#editor").load("4.html");
            }
         
            
        });
</script> 

Answer 1

Меня немного смущает цель textarea в контексте вашего вопроса. Если вы загрузите HTML-код в contenteditable div, вы можете отредактировать его содержимое, а затем просто сохранить innerHTML того же самого div.

const d = document

d.querySelector('button').onclick = e => {
  const storedHTML = d.getElementById('t').innerHTML
  
  console.log(storedHTML)
}

<div id="t" contenteditable>
  <h1>This is a header</h1>
  <p>This is paragraph copy</p>
</div>

<button>Export</button>