ITエンジニア/デザイナ向けにオープンソースを毎日紹介

fresherEditorはcontentEditableを使ったWYSIWYGエディタです。

オンラインでコンテンツを編集する際にはWYSIWYGエディタを使うことが多いように思います。色々なライブラリが存在しますが、今回はfresherEditorを紹介します。jQueryベースのエディタです。


デモです。テキストエリアの枠がないのが印象的です。


編集状態です。枠が出ています。


WYSIWYGなのでその場で反映されます。


画像の追加も行えます。


フォントの選択もできます。

fresherEditorではcontentEditableを使ってコンテンツを編集可能にしています。デザインについてはBootstrapを使っています。まさに見たままに編集できる、そんな感じのソフトウェアになっています。

fresherEditorはjQuery/JavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。


MOONGIFTはこう見る

CKEditorなど有名なWYSIWYGエディタは存在しますが、どれもワードプロセッサの域を出ていないように感じます。確かに見た目の装飾などは簡単に行えますが、それがそのまま表示されるかと言えば実際にはそうではなくWebサイトのスタイルシートの影響を大きく受けます。

その意味ではcontentEditableを使うことでまさに見たままに編集ができるのはユニークなアイディアです。後は編集が終わったタイミングでDOMを取得してサーバに送信すれば良いでしょう。サーバサイドでの出力やAjaxによる部分では使えないでしょうが、簡易的なCMSとしての役割は十分担えそうです。

デモ

mquan/freshereditor · GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2