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

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

商用でも利用できる、イケてるWYSIWYGエディタ7選 2017年版

こんにちは。エンジニアの satoshi です。
ランサーズ Advent Calendar 2017 16日目の記事です。

はじめに

今回は、2012年にだした リッチテキストエディタ、WYSIWYGエディタの最新版の記事になります。

技術、ウェブデザインの進化とともに、様々なWYSIWYGエディタが登場してますが、その中でもイケてるエディタを8つ紹介したいと思います。

WYSIWYGエディタって?

リッチテキストエディタともいわれているようですが、HTMLの知識がなくても、フォントサイズの大小・見出し文字・テーブル表記などを、直感的に使うことの出来るエディタです。

ちなみに「What You See Is What You Get(見たままが得られる)」という頭文字をとった言葉です。

WYSIWYGエディタ7選

 

名前 License 商用利用
CKEditor4 GPL or LGPL or MPL $499〜
TinyMCE LGPL 個別に設定
Trix MIT OK
Quill BSD OK
MEDIUM.JS MIT OK
Trumbowyg MIT OKだけどよかったら寄付してね
Draft.js BSD OK

 

CKEditor4

CKEditorは 2012年の記事にも登場しましたが、古くから WYSIWYGエディタを提供しております。UIもリッチで殆どのニーズに答えれるような機能を提供しております。

安定バージョンは4ですが、現在 CKEditor5 のα版が提供されてます。

TinyMCE

TinyMCEは、CKEditor同様、古くからWYSIWYGエディタを提供しております。WordpressやAttrasianで利用されているところから安定の使いやすさを提供していると言える。

商用利用の設定にくせがあるので、ケースによってよく確認してください。

Trix

TrixはRailsで有名なBasecamp(旧37signals)が開発しているエディタです。
日本語対応は無いですが、シンプルな機能のみのエディタなので直感的にさわれるので、不要かと思います。

似たシンプルなエディタに Squire もあります。

Quill

クロスブラウザ、クロスプラットフォームに強みを置くエディタ。コードブロックの機能など、エンジニアには嬉しい機能があります。
playground でまずはさわってみると良いかと思います。

MEDIUM.JS

  • LISENCE: MIT
  • 商用利用: OK
  • ツールバーの日本語: なし
  • Getting Start (USAGE から)
  • Github

今回紹介したエディタの中ではもっともシンプルなエディタです。出来ることをあえて絞りたい場合に有効かと思います。

Trumbowyg

シンプルな機能ながら多言語対応もあり、導入も楽にできます。

Draft.js

Facebookが開発しているシンプルなエディタ。Reactのプロジェクトには使い勝手が良いのでおすすめです。

終わりに

利用内容、サービス、時期によってライセンスが異なる場合もありますので、ご利用の際は各エディタのライセンスを改めて確認いただくことをおすすめします。

CKEditorやTinyMCEは商用の場合、費用が必要になりますが、その分機能面、サポートが充実しているのでおすすめです。それ以外も今回紹介したエディタであれば、大抵のニーズには応えられるかと思いますので、参考になれば幸いです。

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


【中途採用】
サービスリードエンジニア
テックリード(アーキテクト)
フロントエンドエンジニア
サーバーサイドエンジニア
業務エンジニア(社内システム基盤・基幹システム)

【インターン・学生バイト】
19新卒対象サマーインターン
エンジニアインターン

その他採用情報

関連記事

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

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

thumbnail
エンジニアチームのメンター制度のご紹介

ランサーズ Advent Calendar 2016 7日目の記事です。 ランサーズエンジニアの 聡 です。 僕からは、ランサーズに入社した際に、業務以外のサポート体制として、メンター制度についてお話したいと思います。 ランサーズでは、入社したエンジニアメンバ …

5分で完了!Webサイトに簡単にチュートリアルが作れるIntro.jsの使い方

こんにちは。 開発部の 神庭(godgarden)です。   先日、サービスの操作説明をするために、操作マニュアル(チュートリアル)ようなものを作りたいって要望があり、少しだけ調べる機会がありました。 操作マニュアル(チュートリアル)といえば、前職の …