Ory - 段組まで変えられる高いカスタマイズ性を持ったWYSIWYGエディタ MOONGIFT
一昔前のCMSというとユーザの見る画面と管理画面がはっきりと分かれていました。セキュリティ上はやりやすいかも知れませんが、管理者としてはユーザがどう見えているかを逐一確認する必要があって不便でした。 最近ではユーザの見ている画面上でそのまま編集できるものが増えています。その最新作と言えるのがOryです。 Oryの使い方 こちらがエディタの画面。右側にアイコンが並んでいます。 編集中です。文字を選ぶとフローティングで装飾メニューが出ます。 日本語も入力できます。 さらにコンテンツをドラッグして配置変更も。 しかも段組まで変えられます！ 三段だってできます。 新しいコンテンツを追加する場合は右側から。 Oryはコンテンツのカスタマイズできる幅が大きく、かつ編集内容がそのままユーザの見ている画面になるので非常に分かりやすく編集できます。操作性も直感的なので使い勝手は良いでしょう。 OryはJav
オープンソースのWYSIWYGエディタ「Quill 1.0」がリリース
「Quill」は、2014年に登場したWYSIWYGエディタで、モジュール構造の採用と強力なAPIの搭載によって、リッチテキストの編集に対応している。 今回リリースされた「Quill 1.0」では、構文によって色分けされたコードが他のテキストとシームレスに混在できるようになったほか、LaTeX形式の数式レンダリングに対応した。また、さまざまな表現を可能にするクラスが追加されるとともに、フローティングツールバーをベースにした新テーマ「Bubble」が追加されている。 「Quill 1.0」における最大の新機能は「Parchment」で、「Parchment」を利用すれば動画やコードの構文色分け、数式を含む多様なフォーマットやコンテンツを「Quill」上で作成できる。 このほか「Quill」の公式サイトでは、ドキュメントページが、より参照しやすく改善されるとともに、「Interactive P
Trix - 毎日使うからこそ。Basecamp製のWYSIWYGエディタ MOONGIFT
見た目に派手、またはとにかく機能を詰め込んだソフトウェアは一見すると便利そうに見えるでしょう。しかしそれを毎日使い続けるとなると話は別です。むしろシンプルで必要なものだけが揃っている方が安心できるのではないでしょうか。 Trixはそんな観点から作られたWYSIWYGなテキストエディタです。開発したのはBasecamp（前は37 signals）、Ruby on Railsの開発元です。 Trixの使い方 Trixの画面です。ツールバーとテキストボックス、白黒でシンプルなUIとなっています。 普通に文字が書けます（当たり前ですが）。日本語も大丈夫です。 リンクを追加したり、文字を太文字、斜体にするといった装飾もできます。 リスト、引用文なども入力できます。他はundoくらいでしょうか。 TrixはBasecampが開発中の最新版であるバージョン3で使われるWYSIWYGエディタになっています
複雑なレイアウトをブラウザ上でWYSIWYGで組み立てられる「Gridmanager」:phpspot開発日誌
Gridmanager Demos 複雑なレイアウトをブラウザ上でWYSIWYGで組み立てられる「Gridmanager」。 次のようにカラムごとにツールを付与して、コンテンツを追加したり消したり、移動できたり、幅を調整したりとかなり高度な事が誰でも簡単にできるUIが実現可能です。 jQueryプラグインの形で誰でも簡単に実現できるところがすごい。複雑なレイアウトのサイトであっても見たまま編集ができるというのはよさそうですね。 ライブプレビューも可能 レスポンシブにも対応 関連エントリ 軽量でシンプルデザインなWYSIWYGエディタ実装ができる「Trumbowyg」 Bootstrap対応でレスポンシブなWYSIWYGエディタ「Summernote」 軽量でシンプルなHTMLのWYSIWYGエディタ「SCEditor」 オンラインで使えるWYSIWYGなCSS3コードジェネレーター「Enj
Trumbowyg·軽量、HTML5対応のWYSIWYGエディタ MOONGIFT
Web上でHTMLコンテンツを編集する際にWYSIWYGなエディタがよく使われますが、多機能である分読み込むファイルサイズが大きくなったり、動作が重くなってしまったりします。そのほとんどの場合において使いたい機能はそこまで多くないはずです。 そこで紹介したいのがTrumbowygです。HTML5に対応した、軽量なWYSIWYGエディタです。 Trumbowygの使い方 こちらがデモです。すっきりとしたデザインですね。 メニューアイコンをクリックするとさらにサブメニューも表示できます。 リンクを追加する画面です。 画像もURLを指定する形式です。 リスト。日本語も使えます。 Trumbowygの特徴はIE8以上に対応し、HTML5に最適化されています。さらに高速で軽量（15KB）です。オプションも多く、カスタマイズした利用が容易になっています。jQueryプラグインなので使うのは簡単です。例
Web上でコンテンツを見たままに編集·Pen MOONGIFT
PenはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 管理画面でコンテンツを編集して、ユーザ画面で確認したら思わぬ表示の乱れが生じていたなんて経験はCMSの運用担当者であれば誰しもがあるはずです。やはり編集画面と表示画面の分離は問題があるのではないでしょうか。そこで使ってみたいのがPenです。 テキストを選ぶとツールバーが表示されます。 文字を大きくしました。リンクを選択するとそのリンク先を変更できます。 コードの記述や引用もできます。 PenはWYSIWYGなエディタですが、Markdownを使って記述ができます。なお保存機能は実装されていませんので、Penの編集完了のコールバックを受け取ってデータベースに反映すると言った仕組みは自分で開発する必要があります。 MOONGIFTはこう見る 運用上のサービスに限りませんが、自分が書いたテキストがユーザ
大きなアイコン、リボン風UIが格好いいWYSIWYGエディタ·GhostEdit MOONGIFT
GhostEditはリボン風UIをもったWebベースのWYSIWYGエディタです。 GhostEditは新規性あるWebベースのWYSIWYGエディターです。ボタンなどが大きくデザインされており、リボン風UIが使い勝手が良いです。 デモです。文字を選択しています。ハイライトはピンクのバックグラウンドになります。 画像の配置換えです。画像の上に矢印が出るので押すだけです。これが格好いい。 テキスト変更だけでなく、画像やリンクの挿入もできます。 リンクの上にマウスを置くと削除のフローティングが出ます。 保存機能もあります。 GhostEditに関する説明です。 GhostEditは周囲のコンテンツに馴染む形で作られており、これまでのWYSIWYGエディタとは一線を画しているように見えます。機能は他のエディタに比べると決して多くはありませんが必要最低限は用意されています。対応ブラウザはIE 6以
Redactor WYSIWYG html editor
A simple and fast tool for everyday tasks of creating and editing texts on the web. Suitable for creating and editing common texts for the web, which may also include images, video, embed code. It has a hybrid interface that can be customized according to your needs. For example, you can disable the main toolbar and only show the context toolbar when highlighting text. Or show the control toolbar
jQuery製のWYSIWYGエディタ·CLEditor MOONGIFT
CLEditorはjQuery/JavaScript製のオープンソース・ソフトウェア。CGMが盛り上がるにつれて、ユーザがコンテンツを作成する際の利便性を考えなければならなくなっている。そのためブログなどではWYSIWYGエディタが利用されるのが当たり前になっている。 jQuery製のシンプルなWYSIWYGエディタ 有名なものとしてはCKEditorやTinyMCEといったソフトウェアが知られている。どちらも高性能だがその分、動作が重たいのが問題だ。もっと軽量、かつ自分で拡張が容易なものを探しているならばCLEditorを使ってみよう。 CLEditorの特徴はjQueryを使っていることになる。それによってCLEditor単体のサイズは軽量になる。既にWebサービスの中でjQueryを基盤としているならば良い選択肢になりそうだ。主な機能や文字装飾や画像のURL指定での埋め込み、リンクな
jQueryを使ったWYSIWYGなエディタ·elRTE MOONGIFT
elRTEはJavaScript製/jQueryプラグインなオープンソース・ソフトウェア。Webベースでコンテンツを作成したり、編集する際に取り得る手法は幾つかある。例えば一定の記法に沿って書くことでHTMLにコンバートして表示するもの。もう一つはWYSIWYGなエディタを用意してその場で編集するというものだ。 jQuery UIを使っている WYSIWYGエディタであればリテラシーが高くないユーザであっても、リッチなコンテンツの編集が可能になる。CKEditorをはじめとして幾つか有名なソフトウェアはあるが、ここで紹介したいのはelRTEになる。 elRTEはテキストエリアの上にツールバーを表示するタイプのWYSIWYGエディタで、jQuery UIを使って作られているのが特徴になる。jQueryを使っているので、カスタマイズが容易に行えそうなのが魅力だ。ベースのままでは提供されない機能
リッチなWebコンテンツ編集に。jQuery製のWYSIWYGエディタ·WKRTE MOONGIFT
WKRTEはJavaScript/jQuery製のオープンソース・ソフトウェア。Webブラウザのテキストエディット機能があまりに貧弱であるために、開発者はJavaScriptやJavaアプレット、Flashなどの技術を使ってリッチなエディタを作ってきた。 jQuery製のシンプルなエディタ JavaScriptが最も簡単に利用できることもあって、CKEditorのような有名なものも存在する。だがもっと手軽に導入したいならばWKRTEを使ってみるのも良さそうだ。WKRTEはjQueryプラグインなので、同フレームワークを使っているならお勧めだ。 WKRTEの利点として、テキストエリアにフォーカスが当たっていないとツールバーが出てこないと言うのが挙げられる。常時表示されていると邪魔臭く見えてしまうツールバーも、編集時以外は表示されなければ気にならない。 ソース表示も可能 機能は太字、イタリック
リッチ過ぎず、どんなページにも馴染みそうなWYSIWYGエディタ実装jQueryプラグイン「wkrte」:phpspot開発日誌
リッチ過ぎず、どんなページにも馴染みそうなWYSIWYGエディタ実装jQueryプラグイン「wkrte」 2009年12月21日- リッチ過ぎず、どんなページにも馴染みそうなWYSIWYGエディタ実装jQueryプラグイン「wkrte」。 普通、JavaScript で動くWYSIWYGエディタというと、大きなツールバーがついていて、それ自体はカッコいいのですがページデザインにうまく馴染ませることが難しかったりします。 wkrte なら、エディタにカーソルがフォーカスしない状態だとツールバーを表示せず、普通のテキスト領域（textarea）のように表示させられます。 何もはいってない状態だと、一見普通のtextareaです 内容が入ってもツールバーがないので目立ちすぎず、いい感じです。 カーソルを合わせるとツールバーが表示。これはとてもスマートですね。 高機能なテキスト編集を実現しつつ、ペ
まだまだあったJavaScript製のWYSIWYGエディタコンプリート:phpspot開発日誌
まだまだあったJavaScript製のWYSIWYGエディタコンプリート、ということで、本ブログで紹介していない（したものも一部あるかもしれませんが）ライブラリ等をメインにご紹介。 WYSIWYGといっても、それぞれの使い方には特徴があって、微妙に自分の使い勝手にあってなかったりする場合もありますね。ということで選択肢を増やすという意味でご紹介 Free Rich Text Editor OfficeスタイルのリッチなＷＹＳＩＷＹＧエディター →デモページ jHtmlArea - The all NEW HTML WYSIWYG Editor for jQuery WYSWYGエディタ実装用jQueryプラグイン jwysiwyg シンプルなＵＩのＷＹＳＩＷＹＧエディター。jQueryプラグイン SPAW Editor ＵＩが美しいタブ付きＷＹＳＩＷＹＧエディタ →デモページ TTW HT
jQueryを使ったWYSIWYGエディタ·jWYSIWYG MOONGIFT
Webベースでリッチなドキュメントを作成できるソフトウェアと言えば、FCKEditorやWYMeditorなどが一般的だ。これらは非常に便利なソフトウェアではあるが、既に出来上がった感のあるソフトウェアであり、修正しようとも思えないほど多機能だ。逆に多機能すぎて動作が重たいという欠点がある。 jQueryベースのWYSIWYGエディタ 必要なものだけを簡単にピックアップできる、さらに自分なりにカスタマイズすることも考えたい方のためにjwysiwygを紹介しよう。 今回紹介するオープンソース・ソフトウェアはjWYSIWYG、jQueryプラグインとして提供されるWYSIWYGエディタだ。 jWYSIWYGはWYMeditorを模して作られているWYSIWYGエディタだ。jQueryをベースとして作られており、18KBと軽量な作りになっている（圧縮版は7KBだ）。必要な画像やCSSを合わせても
CKEditor Ecosystem | CKEditor.com
Index of / NameLast modifiedSizeDescription
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Mercury Editor: The Rails HTML5 WYSIWYG Editor
IDEA * IDEA
TinyMCE Javascript Content Editor by Moxiecode Systems AB
https://www.openwebware.com/products/openwysiwyg/