2014-06-08 4 views
0

내가 자습서를 많이 겪었 나는이 작동하지하세요 않을 수 있습니다노드 웹킷

을 내가 사업부의 내용을 저장하려면 (contenteditable 사용 가능)을 노드 웹킷이있는 .txt 파일에 추가하십시오. 그 부분은 다음과 같습니다

<div id="editor" class="textbox" contenteditable></div> 

그리고 나는 나 파일을 선택할 수 있습니다 입력 필드가 있습니다

<input type="file" nwsaveas="untitled.txt" style="display:none;"/> 

그러나 나는의 값을 저장하는 방법에 대한 리소스를 찾을 수 없습니다를 사용자 컴퓨터의 .txt 파일로 편집기 div.

나는 간단히 그러나 그것이 내가 내 자신의 프로젝트를 시도 할 때 작동하지 않았다 설명이 tuts 플러스 튜토리얼을 시도 : http://code.tutsplus.com/tutorials/introduction-to-html5-desktop-apps-with-node-webkit--net-36296

사람이 내가 이것을 달성 할 수있는 방법을 알고 있나요?

답변

1

당신은 inputclick 이벤트를 모방와 파일 열기 대화 상자를 확인해야합니다, 다음 #editorinnerHTML 얻을, 그리고 마지막으로 내용을 저장하는 노드의 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> 

희망 :

여기에 전체 작업 예입니다.