时间戳

首页 > 解决方案 > 使用 javascript 将 contentEditable 保存到 html 文件中

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

问题描述

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

标签： javascriptedit

解决方案

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

推荐阅读