Wysihtml editor
THIS is the typewriter for the modern web.Go on, start typing here ... 1. get scriptsbower install wysihtml or download the latest release from Github. 2. include the scripts in your HTML<!-- wysihtml core javascript with default toolbar functions --> <script src="bower_components/wysihtml/dist/wysihtml-toolbar.min.js"></script> <!-- rules defining tags, attributes and classes that are allowed --
複雑なレイアウトをブラウザ上でWYSIWYGで組み立てられる「Gridmanager」:phpspot開発日誌
Gridmanager Demos 複雑なレイアウトをブラウザ上でWYSIWYGで組み立てられる「Gridmanager」。 次のようにカラムごとにツールを付与して、コンテンツを追加したり消したり、移動できたり、幅を調整したりとかなり高度な事が誰でも簡単にできるUIが実現可能です。 jQueryプラグインの形で誰でも簡単に実現できるところがすごい。複雑なレイアウトのサイトであっても見たまま編集ができるというのはよさそうですね。 ライブプレビューも可能 レスポンシブにも対応 関連エントリ 軽量でシンプルデザインなWYSIWYGエディタ実装ができる「Trumbowyg」 Bootstrap対応でレスポンシブなWYSIWYGエディタ「Summernote」 軽量でシンプルなHTMLのWYSIWYGエディタ「SCEditor」 オンラインで使えるWYSIWYGなCSS3コードジェネレーター「Enj
システムエンジニアの戯言
サンプルソースを公開しますので、ご自由にダウンロードしてお使いください。ソースの修正もＯＫです。 ただし、本サンプルを使用して発生した問題等は、本サイト・管理者は一切責任を負いません。 サンプルをダウンロードする 今回作成した、リッチエディタ用の操作クラスと、リッチエディタサンプルを技術文書としてまとめました。 どうぞ、ご覧ください。 Webリッチエディタ技術文書 リッチエディタは、JavaScriptライブラリで提供されているAPIを利用する事で構築できます。 ドキュメントオブジェクトの designMode というプロパティを設定すれば、キー入力による直接編集が可能となります。 さらに、専用のAPIを利用する事で、文字の装飾や画像の貼り付けリンクの埋め込みも可能です。 下記のように設定する事で、リッチエディタの基盤が完成します。 インラインフレームを編集
TwitterBootstrapベースのWYSIWYGエディタ「bootstrap-wysihtml5」:phpspot開発日誌
bootstrap-wysihtml5 TwitterBootstrapベースのWYSIWYGエディタ「bootstrap-wysihtml5」。 HTML5ベースですが、リッチなエディタをBootstrapのテーマで作成することが可能です。 派生物がどんどん出てきて素晴らしい限りですね。 最近最も流行ったオープンソースプロジェクトではないでしょうか。 関連エントリ Twitter BootStrap に追加できる５つのコンポーネントパック「FuelUX」 Twitter Bootstrapでカッコいいカルーセルを実装するサンプルとチュートリアル Twitter Bootstrap で使えるカラーピッカー＆日付ピッカー Twitter Bootstrapじゃなくfacebook Bootstrap？「Fbootstrapp」 Twitter Bootstrapを使ったイメージギャラリーサン
軽量でデザインが良いWYSIWYGエディタ実装jQueryプラグイン「CLEditor」:phpspot開発日誌
CLEditor - WYSIWYG HTML Editor 軽量でデザインが良いWYSIWYGエディタ実装jQueryプラグイン「CLEditor」。 次のようなすっきりしたデザインのWYSIWYGエディタを実装出来ます。ボタンはデフォルトで多数ありますが、カスタマイズ可能です。 全てダウンロードしても10KB以内という軽量なものになっています。 内容に応じてサイズを自動で変えたりすることも出来るようです。 IE 6.0+, FF 1.5+, Safari 4+, Chrome 5+ and Opera 10+で動作確認しているそうです。 jQueryプラグインというのもいいですね。 これは覚えておいてよさそう。 関連エントリ WEBフォームをWEB上でWYSIWYG編集して瞬時にダウンロードできる「pForm」 まだまだあったJavaScript製のWYSIWYGエディタコンプリート
リッチ過ぎず、どんなページにも馴染みそうなWYSIWYGエディタ実装jQueryプラグイン「wkrte」:phpspot開発日誌
リッチ過ぎず、どんなページにも馴染みそうなWYSIWYGエディタ実装jQueryプラグイン「wkrte」 2009年12月21日- リッチ過ぎず、どんなページにも馴染みそうなWYSIWYGエディタ実装jQueryプラグイン「wkrte」。 普通、JavaScript で動くWYSIWYGエディタというと、大きなツールバーがついていて、それ自体はカッコいいのですがページデザインにうまく馴染ませることが難しかったりします。 wkrte なら、エディタにカーソルがフォーカスしない状態だとツールバーを表示せず、普通のテキスト領域（textarea）のように表示させられます。 何もはいってない状態だと、一見普通のtextareaです 内容が入ってもツールバーがないので目立ちすぎず、いい感じです。 カーソルを合わせるとツールバーが表示。これはとてもスマートですね。 高機能なテキスト編集を実現しつつ、ペ
テキストエリアを使ってコーディングしやすくする·CodeMirror MOONGIFT
CodeMirrorはJavaScript製のオープンソース・ソフトウェア。Webブラウザのテキストエリアの貧弱さは言うに事欠かない。メモ帳レベルの機能しかなく、とても使い勝手が悪い。HTMLを作成する場合はWYSIWYGなエディタに変換するCKEditorのようなソフトウェアも存在するが、Webブラウザ上でプログラミングしたいと思うような機能はない。 テキストエリアをハイライト もしWeb上で開発者向けのサービスや環境を提供しようと思うならCodeMirrorを使ってみるといいだろう。CodeMirrorはテキストエリアを開発のしやすいエディタ環境に変化させてくれるソフトウェアだ。例えばJavaScript/HTML/CSS/Python/Rubyといった言語向けにハイライト表示する機能がある。 それらは各言語向けのCSSとJavaScriptで作られたパーサーによって作られている。また
wysiwygエディターをjQueryプラグインで簡単導入「jQRTE」
フォームなどユーザーに入力をさせる部分にwysiwygが利用できるとユーザーの表現が広がります。 これにともない、コンテンツもリッチになるかもしれません。 敷居が高いと思われるwysiwygエディターもjQueryプラグイン「jQRTE」を利用するとあっという間に導入できます。 使用方法 jQRTEからファイル一式をダウンロードします。 一式をアップロードし、index.phpにアクセスすると利用できます。 というように説明も楽・・・。 手を抜きすぎた感が否めないので日本語バージョンを作成しました。 jajp.zip 上記ファイルを/locale/配下にアップロードしてください。 またindex.phpの2行目を以下のように変更ください。 $language="jajp"; サンプル wysiwygエディターをjQueryプラグインで簡単導入「jQRTE」
wysiwygエディターをjQueryプラグインで簡単導入「jQRTE」
twitter facebook hatena google pocket フォームなどユーザーに入力をさせる部分にwysiwygが利用できるとユーザーの表現が広がります。 これにともない、コンテンツもリッチになるかもしれません。 敷居が高いと思われるwysiwygエディターもjQueryプラグイン「jQRTE」を利用するとあっという間に導入できます。 sponsors 使用方法 jQRTEからファイル一式をダウンロードします。 一式をアップロードし、index.phpにアクセスすると利用できます。 というように説明も楽・・・。 手を抜きすぎた感が否めないので日本語バージョンを作成しました。 jajp.zip 上記ファイルを/locale/配下にアップロードしてください。 またindex.phpの2行目を以下のように変更ください。 $language="jajp"; wysiwygエディタ
WYSIWYGな編集機能を持つCMS「concrete5」の公式日本語版がリリース | パソコン | マイコミジャーナル
WYSIWYGな編集機能を持つCMS「concrete5」の公式日本語版がリリース (画面は英語版のデモ) Usagi Projectは20日、オープンソースのCMSシステム「concrete5.3.0 日本語版」をリリースした。利用にはApacheなどのWebサーバとPHP v5以降、MySQL v4.1以降が動作する環境が必要。MITライセンスのもとソースコードは公開され、無償利用できる。 concrete5は、PHPベースのコンテンツ・マネジメント・システム (CMS)。いわゆるLAMP/MAMP構成のサーバにインストールすることで、Webブラウザを使いページデザインや記事の追加などのサイト構築作業を行える。他のCMSにない特徴としては、実際の画面で確認しながら直接ページレイアウトを変更する機能や、画像を直接編集する機能を挙げることができる。アンケート機能やRSSの表示、YouTub
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
シンプルに使えるJS製WYSIWYGエディタ「widgEditor」:phpspot開発日誌
JSでクールなWYSIWYGエディタを実装「FreeRichTextEditor」:phpspot開発日誌