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

thumbnail

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

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

こんにちは。リートの 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よりご応募ください。

PHPエンジニア
Rubyエンジニア
フロントエンドエンジニア
インフラエンジニア
新卒エンジニア
その他採用情報

Comment

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

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

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

関連記事

thumbnail
バーンダウンチャートでISSUEやPRを可視化

この記事はランサーズ Advent Calendar 2016の23日目です。 昨日夜の暴風雨で家が少し揺れたりして危機感を感じたプロダクト開発部のakin.です。 今年のAdvent Calendarも今日を含めあと3日! 今回は弊社Advent Calen …

CloudFront
EC2オリジンのCloudFrontで静的ファイルをキャッシュした話

ランサーズ Advent Calendar 2017 11日目の記事です。 インフラエンジニアの金澤です。 CloudFrontでサムネイルをキャッシュした話に続きまして、静的ファイルをキャッシュした手順も記録として残しておきたいと思います。 導入に至った経緯 …

AWSのスポットインスタンス運用

はじめまして。ランサーズインフラエンジニアの金澤です。 AWSのスポットインスタンスを利用したことはありますか? スポットインスタンスとは、AWSの余剰インスタンスを入札制で提供する仕組みです。 各インスタンスの1時間あたりの料金比較しても、スポットインスタン …