ランサーズ等のサービスを開発・運用する中で得た知識やノウハウを紹介しています。

thumbnail

Labels:  AWS, ツール/ライブラリ 投稿者:satoshi

ユーザーが簡単にHTMLを入力できるWYSIWYGエディタ ベスト3


ランサーズでは、現在、Webエンジニアを募集しています。
詳しくは、募集要項をご覧下さい。

こんにちは。リートの satoshi です。

前回の投稿より、少し時間が空いてしまいましたが、今回はWYSIWYGエディタについてご紹介したいと思います。

WYSIWYGエディタって

ckeditor_capture

WYSIWYGエディタというのは、ブログ記事を書くときにフォントサイズを大きくしたり、見出しや色を変更したり…といったことをボタン一つで簡単に操作ができるとても便利な機能です。

今回はその中でも使えるエディタベスト3をご紹介します!

WYSIWYGエディタベスト3

wisisyg_table_list2

私が選んだのは TinyMCE, CKEditor, NicEdit の3つです。3つともデザインはもちろんのこと、使い勝手がとても良かったです。

それでは3つのエディタについて詳しく紹介していきます。

TinyMCE

tinymce_capture

TinyMCE は社内や個人的な利用用途では制限無く使えるエディターです。商用利用の場合は、$345 から利用出来ます。こちらは、facebookやWordPressといった大規模なサービスにも利用されているような人気のエディタです。

ボールドやリストなどはもちろん、印刷やアイコン挿入など様々な機能が魅力ですし、必要なものだけ自由に設定することも出来ます。標準では日本語対応していませんが、日本語の言語パックを利用することで、簡単に日本語化することもできます。

社内・もしくは個人的に利用するにはとても良いエディタです。しかもフリーで利用出来るので、好きなようにカスタムして利用してはいかがでしょうか?

商用利用の場合は商用ライセンスの購入が必要になります。ご利用の際は TinyMCE公式ページ をご確認ください。

CKEditor

ckeditor_capture

CKEditor はTinyMCEに並んで有名なエディタです。以前はFCKeditorと呼ばれていたそうですが、バージョンが3.0になったときにCKEditorとなったようです。こちらもIBMやAdobeなど様々なサービスで利用されています。

なんと言ってもデザインがきれいなのが一番の魅力ではないでしょうか?背景色を選べたりスキンのデザインも3種類用意されています。また、他の2つにはないフォームタグ(input, textarea, select 等)のボタンが用意されています。特殊なケースかもしれませんが、こういった場合にも対応しているのはうれしいです!日本語には標準設定で対応しています。

CKEditorが多機能で、デザインもよいのはいいことなのですが、ライセンスがGPLというオープンソースライセンスなのは注意が必要です。商用利用の際は商用ライセンスが$ 375 ~ 用意されています。

法人で運営するサービスに利用するにはとてもオススメのエディタです。ご利用の際は CKEditor公式サイト をご確認の上、ご利用ください。

NicEdit

nicedit_capture

TinyMCEにデザインがよく似ている NicEdit ですが、シンプルかつ親しみやすいエディタです。
こちらは日本語の対応はありません。ただし、すべて直感的に利用出来るデザインですし、MITライセンスなので、個人から商用利用まで制限が無いのが一番の魅力です。

ボタンの種類や、細かな機能では他の2つには及ばない部分もありますが、シンプルに自由に利用するには一番のエディタではないかと思います。また、こちらは22歳のウェブ開発者が作成したそうです(すごい!)。そういったところにもとても親しみを感じます。

ご利用の際は NicEdit公式サイト をご確認の上、ご利用ください。

その他オススメのエディタ

上記3点にも劣らず便利なエディタを紹介させて頂きます。導入の参考にしてください。

prototype.jsでクロスブラウザなWYSIWIGエディタ

prototypejs_capture

URL:http://a-h.parfe.jp/einfach/archives/2006/1213124637.html
ライセンス:MIT 日本語:あり

YUI Library Examples: Rich Text Editor

rich_editor_capture

URL:http://developer.yahoo.com/yui/examples/editor/
ライセンス:BSD 日本語:なし

openWYSIWYG

openwisiwyg_capture

URL:http://www.openwebware.com/
ライセンス:LGPL 日本語:なし

個人・社内・商用サービスなど、利用用途や、環境によって使いやすいエディタはそれぞれあると思います。この情報は2010年11月19日現在の情報ですので、導入時はそれぞれのライセンスをよくご確認の上、ご利用ください。参考になれば幸いです。

それでは今後ともよろしくお願いします。

ランサーズではサービスを成長させてくれるエンジニア、デザイナーを募集しています!
ご興味がある方は、以下URLよりご応募ください。

Webエンジニア(Wantedly)
Rubyエンジニア(Wantedly)
フロントエンドエンジニア(Wantedly)
インフラエンジニア(Wantedly)
2017新卒エンジニア(Wantedly)
エンジニアインターン(Wantedly)
その他採用情報

Comment

  1. ビッグボーイ さん  2014年5月29日 8:46 PM

    こちらの記事が執筆されたのがだいぶ昔なせいかもしれませんが、
    商用利用の場合のライセンス種別、および支払いの必要についての内容に誤りがあるように思いましたので、コメントさせていただきました。

    TinyMCEとCKEditorの現公式ページをご確認されることをお勧めいたします。

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

関連記事

AWS
AWS セキュリティ対策 〜 操作履歴を CloudTrail で残してみた

こんにちわ。こじまです。 ランサーズでは,AWS を利用してシステムを運用しています。 コンプライアンスの監査,トラブルシューティング,そして,セキュリティ分析を実施するために AWS の操作履歴を残すことは必須です。   今日は,AWS 操作履歴を …

AWS_Logo_PoweredBy_127px
AWS API とサーバ管理

あけましておめでとうございます。エンジニアの こじま です。 今年もよろしくお願いいたします。   今回は,ランサーズの開発・運用を楽にするための サーバ管理システムのご紹介をします。 弊社プラットフォームでは AWS を利用しています。 &nbsp …

thumbnail
意外とすんなり作れたApple Watch 開発環境

  ランサーズ エンジニアの土屋です。 先日社内勉強会で行った、Apple Watch開発の環境構築内容を共有します。Apple Watch開発するぞ!という方のお役に立てたら幸いです。 Apple Watchについておさらい 2015/03/10の …