質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Electron

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

1回答

1620閲覧

Nodeでファイルを読み込んだ時、Reactのlive previewが反応しない。

退会済みユーザー

退会済みユーザー

総合スコア0

Electron

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2016/02/02 14:06

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ソースコードを拝見しましたが,おそらくfsは関係ないと思われます.

sass で .editor-outputにwidth48%をしているせいで,
ウィンドウサイズが680px以下の時にtextareaの下に折り返されて出力結果が表示されていないでしょうか?
自分の手元では,width: 48% を消したところ正常に出力されている用に見えます.

ウィンドウの大きさが初期では800で,かつ開発者ツールを表示させているので,
消えてしまっている(下に折り返されている)のではないのでしょうか?
要素の検証をしてみたところですとdomは正常に作られていたので.

投稿2016/02/16 10:32

編集2016/02/16 11:04
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問