使用 javascript 将 contentEditable 保存到 html 文件中答案

【问题标题】：Save contentEditable into html file with javascript使用 javascript 将 contentEditable 保存到 html 文件中
【发布时间】：2018-10-30 14:08:24
【问题描述】：

如何使用 javascript（非 PHP）将 contenteditable 元素保存到实际的 HTML 代码中？因此，即使在离线模式下，我也可以随时编辑内容。就像当您单击“保存按钮”时，它将旧文件替换为新文件（带有更改的文本）。

如果有办法使用任何其他编程语言使其在离线模式下工作，请提出建议。

我找到了一些示例，但它们都是用 PHP 制作的。

另外，我将发布代码。在此代码中，您可以使用 javascript 编辑文件并保存它。但问题是它不会保存到实际的 HTML 代码中。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<style type="text/css">
 body{ 
  font-family: "Dosis"; 
  font-size: 1.3em;
  line-height: 1.6em;
}

.headline{
  font-size: 2em;
  text-align: center;
}

#wrapper {
  width: 600px;
  background: #FFF;
  padding: 1em;
  margin: 1em auto;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  border-radius: 3px;
}

button {
  border: none;
  padding: 0.8em;
  background: #F96;
  border-radius: 3px;
  color: white;
  font-weight: bold;
  margin: 0 0 1em;
}

button:hover, button:focus {
  cursor: pointer;
  outline: none;
}

#editor {
  padding: 1em;
  background: #E6E6E6;
  border-radius: 3px;
}

</style>
<body>

<div id="wrapper">

  <section>
    <h1 class="headline">contentEditable Demonstration</h1>

    <button id="editBtn" type="button">Edit Document</button>
    <div id="editDocument">
      <h1 id="title">A Nice Heading.</h1>
      <p>Last Edited by <span id="author">Monty Shokeen</span>
      </p>
      <p id="content">You can change the heading, author name and this content itself. Click on Edit Document to start editing. At this point, you can edit this document and the changes will be saved in localStorage. However, once you reload the page your changes will be gone. To fix it we will have to retrieve the contents from localSotrage when the page reloads.</p>
    </div>
  </section>
</div>

    <script>
    var editBtn = document.getElementById('editBtn');
var editables = document.querySelectorAll('#title, #author, #content');

if (typeof(Storage) !== "undefined") {
  if (localStorage.getItem('title') !== null) {
    editables[0].innerHTML = localStorage.getItem('title');
  }
  if (localStorage.getItem('author') !== null) {
    editables[1].innerHTML = localStorage.getItem('author');
  }
  if (localStorage.getItem('content') !== null) {
    editables[2].innerHTML = localStorage.getItem('content');
  }
}

editBtn.addEventListener('click', function(e) {
  if (!editables[0].isContentEditable) {
    editables[0].contentEditable = 'true';
    editables[1].contentEditable = 'true';
    editables[2].contentEditable = 'true';
    editBtn.innerHTML = 'Save Changes';
    editBtn.style.backgroundColor = '#6F9';
  } else {
    // Disable Editing
    editables[0].contentEditable = 'false';
    editables[1].contentEditable = 'false';
    editables[2].contentEditable = 'false';
    // Change Button Text and Color
    editBtn.innerHTML = 'Enable Editing';
    editBtn.style.backgroundColor = '#F96';
    // Save the data in localStorage 
    for (var i = 0; i < editables.length; i++) {
      localStorage.setItem(editables[i].getAttribute('id'), editables[i].innerHTML);
    }
  }
});
    </script>
</body>

</html>

【问题讨论】：

您能澄清一下“它不会保存到实际的 HTML 代码中”的意思吗？您的意思是您的 javascript 没有按照您的预期修改 HTML，或者您希望此代码仅是 HTML？
就像当你点击“保存”时它会导出带有更改的新文件
这是不可能在浏览器中使用 JavaScript 的，除非你想为你的服务器使用 NodeJS 之类的东西
那么用 NodeJS 编码难吗？我可以在在线托管上做吗？像导入 index.html - / 更改基本文本 / 保存和替换。
您要导出什么？以及以什么格式？您要导出 HTML 吗？如果是这样，为什么？或者您只是想导出正在编辑的内容？

标签： javascript edit

【解决方案1】：

您需要使用类似here 中描述的downloadInnerHtml 函数。理想情况下，您可能还希望在导出之前去除脚本标记和内容可编辑属性，因为您不希望最终的 html 页面可编辑

【讨论】：