ElectronでMarkdown editorを作っています。
reactでtextareaとdivを作って、textareaに入力されたmarkdownをmarkedで変換して、divに出力してlivepreviewしています。
普通にtextareaに入力した場合はpreviewできるのですが、Nodeのfsモジュールでファイルを読み込んだ時はtextarea部分に表示できるものの、previewができません。
いろいろドキュメントなど読んでみたのですが、なんで反映されないのかわかりません。
よろしくお願いします。
レポジトリ:https://github.com/RacioN/RacMd
js
1//ファイルの読み込み 2var remote = require('remote'); 3var fs = require('fs'); 4var dialog = remote.require('dialog'); 5var browserWindow = remote.require('browser-window'); 6var mdEditor = document.getElementById("editor-input"); 7 8function openFile() { 9 var win = browserWindow.getFocusedWindow(); 10 dialog.showOpenDialog( 11 win, { 12 properties: ['openFile'], 13 filters: [{ 14 name: 'Markdown', 15 extensions: ['md', 'txt'] 16 }] 17 }, 18 function(filenames) { 19 if (filenames) { 20 fs.readFile(filenames[0], function(error, text) { 21 if (error != null) { 22 alert('error : ' + error); 23 return; 24 } 25 mdEditor.value = text; 26 //↑ここで読み込み 27 }); 28 } 29 }); 30}
js
1//Render 2var React = require('react'); 3var ReactDOM = require('react-dom'); 4var marked = require('marked'); 5 6var App = React.createClass({ 7 getInitialState: function() { 8 return { markdown: "" }; 9 }, 10 updateMarkdown: function(e) { 11 this.setState({ markdown: e.target.value }); 12 }, 13 render: function() { 14 var html = marked(this.state.markdown); 15 return ( 16 <div> 17 <textarea className="editor-input" id="editor-input" onChange={this.updateMarkdown}></textarea> 18 <div className="editor-output" dangerouslySetInnerHTML={{__html: html}}></div> 19 </div> 20 ); 21 } 22}); 23 24ReactDOM.render( 25 <App />, 26 document.getElementById("react-md") 27); 28
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。