HatanaBlogのようなエディタをjavascriptやhtmlなどで作成してみる

こんにちは、読書したり、ゲームしたり、ブログ書いたり、エンジニアやったりとあちこち飛び回っている豆珈琲です。

先程、小説を投稿(

SF小説 デイウォーカー #1 不老なるもの - 蒼城の小説連載ブログ@不定期 )してきたところで、javascriptをいじっています。

目標:hatenaBlogのようなエディタを作ってみる

下の画像のようなはてなのエディタをお手本に、javascriptの勉強をしていきます。
贅沢を言えば、文章を書くだけで新聞記事のようなレイアウトのpdfやhtmlにできれば楽しいですね。

f:id:mamecafe:20170802140310p:plain

現在の進捗

今現在の進捗はこんな感じ。1日試行錯誤した割には、まだまだSample程度。

f:id:mamecafe:20170802141356p:plain

テキストボックスの設置

テキストボックスの設置は、textareaを使って設置しました。

 <textarea id="sampleinput" name="text_area" cols="20" rows="10"   onKeyup="sampleGetValue();" > HelloWorld!!</textarea>

idは後々で実装を説明するsampleGetValue( )の中で、入力されたテキストの値を取得するために使います。

今回重要になってくるのがonKeyupです。呼んで文字通り、押されたキーが持ち上がった瞬間に、イベントを検知します。

developer.mozilla.org

onkeyupイベント - JavaScript(ジャバスクリプト)リファレンス

hacknote.jp

私は「javascript 即時反映 textarea」といった単語で調べて、このイベントハンドラを知りました。

コラムでも以前書きましたが、こういった調べ物をする際に、今の私のように「具体的にやりたいこと」で検索をするのか、あたりをつけて「イベントハンドラ キー」などで調べるのか変わってくるのでしょうかね?

mamecafe.hatenablog.com

打ち込まれた文字の即時反映

上でも触れましたが、sampleGetValue関数をjavascriptで書いて、キーが上がった瞬間に呼び出すようにしています。

function sampleGetValue(){
var $sampleGetValue = document.getElementById("sampleinput").value;
document.getElementById("sampleoutput").innerHTML = $sampleGetValue;
}

getElementByIdは一致するidのものを呼び出しています。今回はvalueでテキストの値を取り出していますが、他にも呼び出せる値があると思います。

developer.mozilla.org

そして、今度は逆にid:sampleoutputを持つものに値を書き込みます。

innerHTMLは、値をhtmlとして入力するものです。<b>~</b>という太文字の書き方をした場合は、太文字として正しく表示されます。逆にtextContentやinnerContextにした場合はプレーンテキストで表示がされます。

このtextContentやinnerContextの違いは、……IEかそれ以外のブラウザのようです?
いくつかサイトをざっくり見たのですが、innerContextを使う方が無難そうです。

Node.textContent - Web API インターフェイス | MDN

上の処理で打ち込まれたテキストの反映は、以下のようにします。

 <div class="sample" style="background-color:#EDF7FF;">入力欄のテキスト:<span id="sampleoutput"></span></div>

 innerHTMLで出力した場合、クロスサイトスクリプティング攻撃も可能にしてしまうので、外部公開するサービスの実装では、対策をいれることを推奨します。

htmlタグを認識するか、しないか

はてなブログでは「見たままの編集」「HTML編集」などエディタに任せるか、独自でhtmlを組むか選択ができるのでその切替ボタンも設置。

sampleinputで取得した値を更に使って、ボタンでぽちぽち切り替えています。

f:id:mamecafe:20170802144434p:plain

f:id:mamecafe:20170802144456p:plain

ちなみにSlackのbotの進捗

人工無脳で会話まで出来るようになったのですが、
まだ面白みがないので記事にするのはまた今度。
mamecafe.hatenablog.com