Question

我希望能够将HTML从文件加载到可编辑的div中，然后单击按钮。将div中的已编辑html保存为自己的html文件。

我尝试过：

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

但是，此解决方案不起作用。它创建了一个对象，但是却是一团糟。 Javascript将HTML文件作为文本加载到div中。但是，我希望能够在用户编辑div的内容后检索html。

代码：

<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中，则可以在其中编辑内容，然后仅保存同一div的innerHTML。

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>

如何将可编辑的div内容另存为另一个HTML文件？

1 个答案: