最近のCMSはユーザ画面と管理画面を分けるのではなく、ユーザが見ている画面上で直接コンテンツを編集できるようにしています。その方が実際に反映された時にどのように表示されるのかが分かりやすく、管理画面にログインして修正したいコンテンツを探す必要もありません。 そんなCMSの機能を独自のWebシステムでも実装してみたいと思ったら使ってみて欲しいのがEtch.jsです。

Etch.jsの使い方

こちらが編集画面です。背景色が違う場所が編集できます。

文字をクリックするとツールバーが表示されます。

太字の装飾を消しました。

コンテンツによって使える機能を制限できます。

リストを追加しました。

Etch.jsには保存ボタンがあるので、それを押すとコンテンツをAjaxでサーバに飛ばせるようになっています。実際の保存処理などは作らないといけませんが、インライン編集機能を提供する上で使っていると便利ではないでしょうか。

Etch.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

Etch.js - A Content Editor joshontheweb/etch