Question

我正在尝试做一些具体的事情，我不确定是否有可能。我已经看到它回答了如何do with a textarea而不是我要问的问题。

我的代码加载文本文件并根据内容设置项目符号列表。子弹列表既可以使用JQuery-UI进行排序（拖放），也可以使用contenteditable="true"进行编辑。以下是完成此操作的代码：

＆＃13;

window.onload = function() {
var fileInput = document.getElementById('fileInput');
var fileDisplayArea = document.getElementById('fileDisplayArea');

$(function() {
$("#sortable1").sortable({
    items: "li:not(.ui-state-disabled)"
});
$("#sortable2").sortable({});
});

fileInput.addEventListener('change', function(e) {
var file = fileInput.files[0];
var textType = /text.*/;
if (file.type.match(textType)) {
var reader = new FileReader();
reader.onload = function(e) {
var file = reader.result;
var ul = document.createElement('ol');
test = file.replace(/(\})/gim, "\n</li>")
           .replace(/\{/gim, "")
           .replace(/!Variable=(\w+)\s*\n/gim, "<li class='ui-state-default'>$1</li>\n").split(/\s*\n\s*\n/)
           .map(v => v = '\n<li class="ui-state-default ui-state-disabled" style="color:blue; margin-left: 0; opacity:1;">' + v)
           .join('');
console.log(ul.innerHTML);
htmlcontent = "<ul contenteditable='true' id='sortable2'>" + test + "</ul>";
ul.innerHTML = htmlcontent;
fileDisplayArea.innerHTML = ul.innerHTML;
console.log(htmlcontent);

$("#sortable1").sortable({
     items: "li:not(.ui-state-disabled)"
});

$("#sortable2").sortable({
     cancel: ".ui-state-disabled"
});

$("#sortable1 li, #sortable2 li").disableSelection();

if (localStorage.userEdits != null)
document.getElementById("edit").innerHTML = localStorage.userEdits;
}

reader.readAsText(file);
} else {
fileDisplayArea.innerText = "File not supported!"
}
});
}

＆＃13;

#sortable1,
#sortable2 {
  list-style-type: none;
  margin: 0;
  padding: 0;
  zoom: 1;
}

#sortable1 li,
#sortable2 li {
  margin: 0 5px 5px 20px;
  padding: 3px;
  width: 90%;
}

.ui-state-disabled li {
  color: green;
  margin: 0 5px 5px 0px;
}

.ui-state-default li {
  margin-left: 10%;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <body>
    <input type="file" id="fileInput">
    <div id="fileDisplayArea"></div>
  </body>

</html>

＆＃13;

代码加载一个格式如下的文本文件：

FAVORITE SITES {
!Variable=eBay
!Variable=Google
}

AVOIDED SITES {
!Variable=Yahoo
!Variable=CraigsList
}

OTHER SITES {
!Variable=Alexa
!Variable=Amazon
!Variable=Jet
}

MORE SITES {
!Variable=StackOverflow
!Variable=Expedia
!Variable=MouseCity
}

结果输出子弹列表。使用排序和编辑，我可以重新排列列表并编辑/添加项目符号（您可以查看是否测试了代码段并保存要加载的文本示例）。问题是，在我进行排序和编辑后，是否有办法将更改保存回文本文件？我知道有一些限制，但它甚至可以保存为新文件或提示，以便我可以选择保存位置并覆盖旧文件。但这是否可能以及如何保存HTML编辑的想法？

我认为需要两个功能。一种是以与加载的数据文件一致的格式输出更改，另一种是保存它们。如果这没有意义，请发表评论，我可以澄清一下。应该注意，这是在完全本地的环境中完成的。

Answer 1

此代码用于将更改的HTML保存为文本文件。

function savehtml() {
    var htm = document.body.appendChild(
        document.createElement("htm")
    );
    htm.download = "demo.txt";
    htm.href = "data:text/plain," + document.getElementById("fileDisplayArea").innerHTML;
    htm.click();
}

使用此函数调用：

<button onClick="savehtml()">Save HTML as Text</button>

如何将本地HTML的内容保存（更改）为文本文件？

1 个答案: