Skip to content

Web業務システムでも使えるWYSIWYGエディタ×10選

by : 2015/05/12

業務システムでは担当者にテキスト入力を行ってもらうのは良くあることです。そんな時、単なるテキストエリアでは書きたい内容が書き切れないのではないでしょうか。そこで使われるのがツールバーを備えたWYSIWYGエディタです。

かつてはCKEditorがよく知られていましたが、あまりに多機能であるために動作が重たく、使いこなせないケースがよくありました。そこでもっとシンプルに必要十分な機能を備えたエディタを紹介します。

wysiwygetize


単なるテキストエリアに見えますが、文字を書いたり選択するとフローティングのツールバーが表示されます。画像貼り付けの機能はありませんが、文字装飾と見出し設定ができます。

wysiwygetize demo

bootstrap-wysiwyg


Bootstrapと組み合わせて利用します。画像の埋め込み、リンク、文字の配置など十分な機能が備わっています。

Tiny, opensource, Bootstrap WYSIWYG rich text editor from MindMup

freshereditor


見た目は通常のテキストですが、編集可能となっています。contentEditableをサポートしています。

mquan/freshereditor

Wysihtml editor


HTML5なWYSIWYGエディタです。iframeも使っていません。ブラウザはIE8から対応しています。

Wysihtml editor

Trumbowyg


HTML5対応、セマンティックなエディタです。15KB程度と軽量なのも特徴です。画像の埋め込み、フルスクリーン表示もサポートしています。

Trumbowyg : a lightweight WYSIWYG editor | Alex-D / Alexandre Demode

Quill


多数のAPIを備えているのが特徴です。IE9以降に対応しています。スマートフォンやタブレットからも利用できます。

Quill – A Rich Text Editor with an API

Morrigan WYSIWYG HTML Editor


jQuery UI、iframeを使っています。ブラウザはIE8以上から対応で、すっきりとしたデザインが特徴です。

Morrigan WYSIWYG HTML Editor

Scribe


IE9から対応しています。シンプルなインタフェースで、カスタマイズ前提という作りになっています。ミニファイ&Gzipして11.5KBと軽量な作りになっています。

Scribe

Redactor WYSIWYG html editor


145のAPIメソッド、ドラッグ&ドロップのファイル、画像アップロード機能、テーブルタグや動画埋め込みなどとても多機能なエディタです。

Redactor WYSIWYG html editor

bootstrap-wysihtml5


Bootstrapのデザインを活かしたエディタです。他のテーマにしても親和性が保てるかと思います。ファイルアップロードはありませんが、URLを指定した画像埋め込みは可能です。

bootstrap-wysihtml5


いかがでしょうか。最近はごくシンプルに、かつカスタマイズも容易なものが好まれる傾向があります。自社のシステム要件に合わせてカスタマイズすれば利用者の混乱は少なく、余計なデータが入り込むこともないでしょう。

ぜひ活用してください!

hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive

From → HTML5

コメントは停止中です。

%d人のブロガーが「いいね」をつけました。