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

Question

How can I save contenteditable element with javascript(no PHP) into actual HTML code?如何将带有 javascript（无 PHP）的 contenteditable 元素保存到实际的 HTML 代码中？ So I can edit content whenever even in offline mode.因此，即使在离线模式下，我也可以随时编辑内容。 Like when you click "save button" it replace old file with new one(text with changes).就像当您单击“保存按钮”时，它会用新文件（带有更改的文本）替换旧文件。

If there is a way to make this work in offline mode with any other programming lang please suggest.如果有一种方法可以使用任何其他编程语言在离线模式下进行这项工作，请提出建议。

I found a few examples but they were all made with PHP.我找到了一些例子，但它们都是用 PHP 制作的。

Also, I will post code.另外，我将发布代码。 In this code, you are able to edit the file with javascript and save it.在此代码中，您可以使用 javascript 编辑文件并保存。 But problem is that it does not save into actual HTML code.但问题是它不会保存到实际的 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

You'll want to use something like the downloadInnerHtml function as described here .您将需要使用类似于此处所述的 downloadInnerHtml 函数的功能。 Ideally you'll probably also want to strip out the script tag and content editable attribute before exporting because you won't want the final html page to be editable理想情况下，您可能还希望在导出之前删除脚本标记和内容可编辑属性，因为您不希望最终的 html 页面可编辑

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

问题描述

1 个解决方案

解决方案1
0 2018-11-01 00:21:52

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

问题描述

1 个解决方案

解决方案1 0 2018-11-01 00:21:52

解决方案1
0 2018-11-01 00:21:52