Question

如何使用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>

Answer 1

您将要使用类似here所述的downloadInnerHtml函数。理想情况下，您可能还希望在导出之前删除脚本标签和content可编辑属性，因为您不希望最终的html页面可编辑

使用JavaScript将contentEditable保存到html文件中

1 个答案: