まさにWebサイトを見たままに編集できるWYSIWYGエディタ「fresherEditor」
fresherEditorはcontentEditableを使ったWYSIWYGエディタです。
オンラインでコンテンツを編集する際にはWYSIWYGエディタを使うことが多いように思います。色々なライブラリが存在しますが、今回はfresherEditorを紹介します。jQueryベースのエディタです。
[](http://images.moongift.jp/2013/02/Screenshot 2013-02-27 9.57.17.1361947488.png)
デモです。テキストエリアの枠がないのが印象的です。
[](http://images.moongift.jp/2013/02/Screenshot 2013-02-27 9.57.26.1361947493.png)
編集状態です。枠が出ています。
[](http://images.moongift.jp/2013/02/Screenshot 2013-02-27 9.57.48.1361947496.png)
WYSIWYGなのでその場で反映されます。
[](http://images.moongift.jp/2013/02/Screenshot 2013-02-27 9.58.28.1361947499.png)
画像の追加も行えます。
[](http://images.moongift.jp/2013/02/Screenshot 2013-02-27 9.58.36.1361947503.png)
フォントの選択もできます。
fresherEditorではcontentEditableを使ってコンテンツを編集可能にしています。デザインについてはBootstrapを使っています。まさに見たままに編集できる、そんな感じのソフトウェアになっています。
fresherEditorはjQuery/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。
MOONGIFTはこう見る
CKEditorなど有名なWYSIWYGエディタは存在しますが、どれもワードプロセッサの域を出ていないように感じます。確かに見た目の装飾などは簡単に行えますが、それがそのまま表示されるかと言えば実際にはそうではなくWebサイトのスタイルシートの影響を大きく受けます。
その意味ではcontentEditableを使うことでまさに見たままに編集ができるのはユニークなアイディアです。後は編集が終わったタイミングでDOMを取得してサーバに送信すれば良いでしょう。サーバサイドでの出力やAjaxによる部分では使えないでしょうが、簡易的なCMSとしての役割は十分担えそうです。