Posted at

JQueryでリアルタイムプレビューっぽいものをつくる

More than 1 year has passed since last update.

前回の続きで、リアルタイムプレビューの理解をするため、メモを残します。

Railsでmarked.jsを使用してみる


vue.jsに関して

マークダウンのリアルタイムプレビューで参考にさせていただいた記事では、vue.jsを使用しておりました。

Railsにマークダウンのリアルタイムプレビューを実装する

私自身に知識がなかっただけなのですが、vue.jsはフレームワークでした。

他のフレームワーク(ReactやAngular)と比べ、軽量で、View層にだけ焦点を当てている分導入コストが低い、とのことです。

詳しくはドキュメントをご参照ください。

vue.jsのドキュメント

とはいえ、フレームワークであるならば、ふつうにJavaScriptやJQueryを使ってできるだろうと思い、勉強がてら作成してみました。


コード

RailsへのJQueryインストールは割愛します。

参考にさせていただいたサイトは下記になります。

jQueryで色々なフォーム入力値をリアルタイム取得する

まずはビューのHTMLです。

Railsのscaffoldで作成されるフォームを少し修正したくらいです。

<form>

<%= form_for @post, :url => {:action => :create} do |f| %>
<div class="form-group">
<%= f.text_field :title , class: 'form-control', placeholder: 'タイトルを入力してください'%>
</div>
<div class="form-group">
<div id='editor'>
<textarea name="post[content]" class="form-control" rows="20"></textarea>
<div id="marked-area"></div>
</div>
</div>
<% end %>
</form>

続いて、Javascript(JQuery)側です。

最終的にはマークダウン出力したいので、関数名はreplaceMarkdownとなっています。

$(function() {

$("#editor textarea").each(function () {
$(this).bind('keyup', replaceMarkdown(this));
});
function replaceMarkdown(elm) {
var v, old = elm.value;
return function () {
if (old != (v = elm.value)) {
old = v;
str = $(this).val();
$("#marked-area").html(str);
}
}
}
});


JSのコードに関して

まずは、対象のtextareaに関してkeyupイベントと関数をバインドさせます。

keyupはキーボードのキーが押され、上がった際に呼び出されます。

JQuery 日本語リファレンス -keyup-

keyupされたタイミングでreplaceMarkdownを呼びます。

ここで詰まったことが、この変数の宣言です。

参考にさせていただいたサイトにてこの宣言をしておりました。

var v, old = elm.value;

勝手に勘違いしておりまして、v = old = elm.valueで読み進めておりました。

JQueryでは変数をこのように宣言できます。

(どうりでページロード時にvを出力させるとundefinedになるわけです。。。)

var v;

var old = elm.value;
// ↓
var v, old = elm.value;

jQueryを読むために知っておきたい6つの知識

あとはvoldを比較して、異なれば書き換えます。

  function replaceMarkdown(elm) {

var v, old = elm.value;
return function () {
if (old != (v = elm.value)) {
old = v;
str = $(this).val();
$("#marked-area").html(str);
}
}
}

なお、marked.jsを使用してstrをマークダウンに変換すれば、ちゃんと出力されます。

$("#marked-area").html(marked(str));