我已经看过很多教程,但我永远无法让它工作:
我想使用 Node Webkit 将 div 的内容(启用了 contenteditable)保存到 .txt 文件。该部分如下所示:
<div id="editor" class="textbox" contenteditable></div>
我有一个输入字段,可以让我选择文件:
<input type="file" nwsaveas="untitled.txt" style="display:none;"/>
但是,我找不到任何有关如何将编辑器 div 的值保存为用户计算机上的 .txt 文件的资源。
我尝试了这个 tuts plus 教程,它简要解释了它,但是当我在自己的项目上尝试它时,它似乎不起作用:http://code.tutsplus.com/tutorials/introduction-to-html5-desktop-apps-with-node-webkit--net-36296
有谁知道我怎样才能实现这个目标?
最佳答案
您必须通过模拟input
的click
事件打开文件对话框,然后获取#editor
的innerHTML
code>,最后使用node的fs.writeFile
来保存内容。
这是完整的工作示例:
<!DOCTYPE html>
<html>
<head>
<script>
var initInputFile = function() {
document.getElementById('inputFile').addEventListener('change', function() {
var path = this.value; //get fullpath of chosen file
var content = document.getElementById('editor').innerHTML; //get editor's content
content = (' ' + content).slice(1); //hack to prevent strange bug of saving just half of the content
require('fs').writeFile(path, content, function(err) {
if (err) throw err;
console.log('done');
});
var wrapper = document.getElementById('inputFileWrapper');
wrapper.innerHTML = wrapper.innerHTML; //hack to make "change" event trigger...
initInputFile(); //...when choosing the same file
});
}
window.onload = function() {
initInputFile();
document.getElementById('saveBtn').addEventListener('click', function() {
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click');
document.getElementById('inputFile').dispatchEvent(event);
});
}
</script>
</head>
<body>
<div id="editor" class="textbox" style="width:400px; height:100px;" contenteditable></div>
<div id="inputFileWrapper" style="display:none;">
<input type="file" id="inputFile" nwsaveas="untitled.txt"/>
</div>
<input type="button" id="saveBtn" value="Save" />
</body>
</html>
希望这有帮助。
关于javascript - Node Webkit 如何将 div 的值保存为 .txt 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24104658/