まさにWYSIWYG！ 一般的にCMSを構築した場合、訪問者の見る画面と管理者の画面は分かれています。管理上、その方が分かりやすいのですが、管理者にとっては編集した内容がどのように表示されるかが掴みづらいのが難点です。 そこで最近では訪問者の見たままにWebサイトを編集できるCMSが増えていますが、同じような機能を独自のシステムにも追加できるのがjQuery Notebookです。

jQuery Notebookの使い方

jQueryプラグインだけあって使い方は簡単です。

<div class="my-editor"></div>
$(document).ready(function(){
    $('.my-editor').notebook();
});

これで完了です。続いてデモを見ていきます。

jQuery Notebookのデモ

これが訪問者の見ている画面だとします。

なんの問題もなく閲覧できています。ここで文字を選択します。

そうするとするするっとツールバーがアニメーションしてきます。

リンクを選択するとそのままURLを入力するフローティングに変わります。

編集だけでなく文字の入力もできます。

後は編集した内容をサーバに飛ばす仕組みさえあれば良いだけです。訪問者がきた際には、jQuery Notebookを使わなければ良いだけで、同じ画面を閲覧、編集の両方で使えるのは便利そうです。

jQuery NotebookはjQuery/JavaScript製のオープンソース・ソフトウェアです。

jQuery Notebook Demo raphaelcruzeiro/jquery-notebook