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

技術 - WYSIWYGの記事一覧

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

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

もっと見る

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が使い勝手が良いです。デモです。文字を選択しています。ハイライトはピンクのバックグラウンドになります。画像の配置換...

29632?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f09%2fscreenshot2011-09-15-16.36.32_thumb

  • 2011/09/24

次世代型WYSIWYGエディタ。見たままにコンテンツを編集する「Mercury Editor」

Mercury Editorは実際に表示された内容をそのまま編集できるWYSIWYGエディタ。Mercury EditorはHTML5/JavaScript製のオープンソース・ソフトウェア。Webサイトを運営していると、一部のデータを変更したいというニーズは必ず発生する。全てを自動化できる訳はなく、アイコンやラベルの変...

24189?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2010%2f12%2fscreen-shot-551

  • 2010/12/27

その場ですぐにコンテンツ修正「PROPER」

PROPERはJavaScript/jQuery製のオープンソース・ソフトウェア。ブログやCMSなどのテキストを中心としたWebサイトでユーザ画面で確認した時にはじめてミスに気付くことがある。そして慌てて管理画面に入ってコンテンツを修正した、なんて経験はないだろうか。その場でコンテンツ編集を行うエディタそのコンテンツ修...

23954?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2010%2f12%2fscreen-shot-418

  • 2010/12/15

共同編集可能なWebベースのテキストエディタ「SynchroEdit」

SynchroEditはJava/JavaScript製のオープンソース・ソフトウェア。GoogleドキュメントなどWebベースのオフィススイートが登場したことで、Webアプリケーションの活用がさらに活発になっている。となれば次に必要になるのはテキストエディタではないだろうか。デモサーバより Googleのような外部の...

Missing

  • 2010/08/16

jQuery製のWYSIWYGエディタ「CLEditor」

CLEditorはjQuery/JavaScript製のオープンソース・ソフトウェア。CGMが盛り上がるにつれて、ユーザがコンテンツを作成する際の利便性を考えなければならなくなっている。そのためブログなどではWYSIWYGエディタが利用されるのが当たり前になっている。jQuery製のシンプルなWYSIWYGエディタ 有...