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

技術 - WYSIWYGの記事一覧

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

もっと見る

List

  • 2014/07/22

Etch.js - コンテンツを見たままに編集するWYSIWYGエディタ

最近のCMSはユーザ画面と管理画面を分けるのではなく、ユーザが見ている画面上で直接コンテンツを編集できるようにしています。その方が実際に反映された時にどのように表示されるのかが分かりやすく、管理画面にログインして修正したいコンテンツを探す必要もありません。そんなCMSの機能を独自のWebシステムでも実装してみたいと思っ...

List

  • 2014/07/18

Trumbowyg – 軽量、HTML5対応のWYSIWYGエディタ

Web上でHTMLコンテンツを編集する際にWYSIWYGなエディタがよく使われますが、多機能である分読み込むファイルサイズが大きくなったり、動作が重くなってしまったりします。そのほとんどの場合において使いたい機能はそこまで多くないはずです。そこで紹介したいのがTrumbowygです。HTML5に対応した、軽量なWYSI...

List

  • 2014/05/21

Quill – APIが多彩なWYSIWYGエディタ

Webのテキストエリアの貧弱さには皆が辟易しています。だからこそツールバーを付けたり、中でHTMLが使えるようなWYSIWYGエディタに人気が集まります。しかしそうしたソフトウェアは柔軟性が高くなく、自分好みにならないケースもあるでしょう。そこで紹介したいのがQuillです。リッチなテキストエディタとAPIというのが売...

List

  • 2014/05/20

Morrigan jQuery Editor – 軽量かつ機能十分なjQueryプラグインのWYSIWYGエディタ

WebベースのWYSIWYGエディタと言えばCKEditorが有名ですが、今では他にも多数の選択肢があります。むしろCKEditorは多機能すぎてどういった動作をするのかが分からなかったり、重たかったりと利用を避ける人もいます。そこで今回は十分な機能を備えつつ、軽量なWYSIWYGエディタMorrigan jQuery...

List

  • 2014/03/24

Scribe - カスタマイズ前提のWebベースのWYSIWYGエディタ

自由に組み込めるのは良さそうですね!WebベースのWYSIWYGエディタと言えばCKEditorやTinyMCEなどが思いつきますが、大型なものは組み込みは手軽でもカスタマイズが難しかったり、サイトの色に合わせて見た目を変更するのも困難だったりします。かといってシンプルなものだと機能が足りないなどと、どっちつかずになっ...

List

  • 2014/02/25

Doctored.js - DocBookなどXMLドキュメントをWeb上でメンテナンス

2000年ごろ、技術界隈がXMLに注目していた時に技術文書を書くためのマークアップとしてDocBookが広まりました。個人的にはDocBookやSmartDocで文書を書いていた覚えがあります。どちらもデファクトになることなく別な技術に注目がいってしまったように思います。しかしDocBookはまだまだ使われており、現在...

List

  • 2014/02/13

jQuery Notebook - 見ているWebページをそのままに編集

まさにWYSIWYG!一般的にCMSを構築した場合、訪問者の見る画面と管理者の画面は分かれています。管理上、その方が分かりやすいのですが、管理者にとっては編集した内容がどのように表示されるかが掴みづらいのが難点です。そこで最近では訪問者の見たままにWebサイトを編集できるCMSが増えていますが、同じような機能を独自のシ...

List

  • 2014/01/08

wysiwygetize - これで十分なケースは多そうなWYSIWYGエディタ

とてもシンプルなWYSIWYGエディタですよ!Web上でテキストを入力する際に何らかのWYSIWYGエディタを備えているケースは多いです。しかし難点はそういったエディタの機能が多く、使いこなせないということです。その際にサイズが大きいので動作が重くなります。そこで使ってみたいのがwysiwygetizeです。ぱっと見は...

List

  • Premium_s 2013/11/01

業務で使えるオープンソース(93)「WYSIWYG」

今回のテーマはWYSIWYGです。FCKEditorなどからはじまった歴史は今もなお止まらずに進化し続けています。そうした最近の流行や選定基準について、さらにこれまでに紹介してきたWYSIWYGエディタをまとめて紹介します。

List

  • 2013/10/29

Bootstrap Markdown - 使おう!BootstrapにマッチしたMarkdownエディタ

Markdownでコンテンツを編集するサイトでは採用必須ですね!最近はテキスト編集をさせようと思うとまずMarkdownが筆頭に上がってくるようになりました。さらにWebサービス開発にBootstrapをベースにする人たちもたくさんいます。であればその二つが合わさって欲しいと思っている人は多かったはず。Bootstra...

List

  • 2013/09/18

Web上でコンテンツを見たままに編集「Pen」

PenはJavaScript製のオープンソース・ソフトウェア(MIT License)です。管理画面でコンテンツを編集して、ユーザ画面で確認したら思わぬ表示の乱れが生じていたなんて経験はCMSの運用担当者であれば誰しもがあるはずです。やはり編集画面と表示画面の分離は問題があるのではないでしょうか。そこで使ってみたいのが...

List

  • 2013/06/29

コンテンツを見たままに編集できるHTML5のツールバー「popline」

poplineはJavaScript製のオープンソース・ソフトウェア(MIT License)です。最近のCMSの流行はWYSIWYGな環境です。見たままに、その場で編集できるスタイルは分かりやすくて便利です。今回はストレスフリーでコンテンツの編集が可能なpoplineを紹介します。コンテンツの表示されている状態です。...

List

  • 2013/03/10

まさにWebサイトを見たままに編集できるWYSIWYGエディタ「fresherEditor」

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

List

  • 2013/01/18

CMSに組み込みたい、見たままにページの編集を行うJavaScript「Create.js」

Create.jsはユーザ向け画面をそのまま編集できるJavaScriptライブラリです。CMSは一般的にユーザ向けの画面と管理画面とが分かれて提供されています。しかし運用時にはユーザ向けの画面を見ながらその場で修正したいこともあるでしょう。その際に使えるライブラリがCreate.jsです。メイン画面です。この時点では...

List

  • 2012/11/15

シンプルゆえにカスタマイズ幅が大きいHTML5用WYSIWYGエディタ「Squire」

SquireはHTML5対応のWYSIWYGエディタです。シンプルなUIが特徴です。Web上で使えるWYSIWYGエディタとしてはCKEditorなどが有名ですが、生成されるHTMLが若干やぼったいのと、動作が重たいというのが難点に感じていました。そこでSquireを紹介します。軽量、シンプルなHTML5対応のWYSI...

41404?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f07%2fscreenshot-2012-07-30-11.35.47_thumb

  • 2012/08/11

MarkdownとxHTMLの相互入力変換に対応したWYSIWYGエディタ「Itty Editor」

Itty EditorはxHTML、Markdown記法の相互変換ができるWYSIWYGエディタです。CGMなどでユーザがテキストを入力する際にはWYSIWYGの方が入力しやすいでしょう。しかし慣れてくるとHTMLを使うよりもMarkdownなどを使いたいと思うかも知れません。その両方のニーズに対応できそうなソフトウェ...

39340?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f05%2fscreenshot-2012-05-29-10.32.20_thumb

  • 2012/06/11

すっきりとしたデザインが特徴。高機能なWYSIWYGエディタ「Redactor」

RedactorはjQuery製のWYSIWYGエディターです。Web上でテキストコンテンツを記述する際には素のテキストエリアではなくWYSIWYGエディタを使いたいのではないでしょうか。そこで試したいのがRedactorです。jQueryを使ったすっきりしたデザインのWYSIWYGエディタです。一行のツールバー、画像...

37016?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f03%2fscreenshot-2012-03-21-12.03.59_thumb

  • 2012/03/30

Bootstrapを使ったサイトに組み込みたいWYSIWYGエディタ「Bootstrap-wysihtml5」

Bootstrap-wysihtml5はTwitter Bootstrapで使えるWYSIWYGエディタです。最近よく目にするようになったTwitter Bootstrapを使ったWebサイト。そんなWebサイトでWYSIWYGエディタを使うならば導入したいのがBootstrap-wysihtml5です。Bootstr...

36112?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f02%2fscreenshot-2012-02-22-15.50.44_thumb

  • 2012/03/03

今見ているコンテンツをそのままに編集「Hallo」

Halloは表示されているコンテンツをクリックすると編集モードに移行するWYSIWYGエディタです。HalloはこれまでにないほどシンプルなWebベースのWYSIWYGエディタです。今見ているコンテンツをクリックで編集可能にします。最初の表示です。何の変哲もないHTMLです。クリックすると編集できます。文字を選択すると...

35840?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f02%2fscreenshot-2012-02-14-11.31.23_thumb

  • 2012/02/24

大きなアイコン、リボン風UIが格好いいWYSIWYGエディタ「GhostEdit」

GhostEditはリボン風UIをもったWebベースのWYSIWYGエディタです。GhostEditは新規性あるWebベースのWYSIWYGエディターです。ボタンなどが大きくデザインされており、リボン風UIが使い勝手が良いです。デモです。文字を選択しています。ハイライトはピンクのバックグラウンドになります。画像の配置換...