簡易WYSIWYGエディタを作る - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 Javascriptを使ったWYSIWYGエディタと言えば、openWYSIWYGという立派なものが既に公開されているわけで、実際利用するにもこれを弄ったほうが使えそうなのですが、カスタムするにも周辺知識は必要だろう、ということで作ってみました。 動作確認はサンプルにて。おおかまかな手順は、以下。 iframeを生成する （textareaを隠す） iframeのdesignModeをonにする （文書を編集可能にする） iframeにイベントを付与する （編集内容をtextareaに反映する） 提供される機能としては、こんな感じです。 execCommand()で各
NicEdit - WYSIWYG Content Editor, Inline Rich Text Application
What is NicEdit? NicEdit is a Lightweight, Cross Platform, Inline Content Editor to allow easy editing of web site content on the fly in the browser. NicEdit Javascript integrates into any site in seconds to make any element/div editable or convert standard textareas to rich text editing. Take boring textareas like this one in your application A Full featured rich text editor in your application i
テキストエリアに入力した文字を選択し、「太字」や「青」などのボタンを選択すると、”テキストエリア内の”文字が装飾されるようにしたいです。…
テキストエリアに入力した文字を選択し、「太字」や「青」などのボタンを選択すると、”テキストエリア内の”文字が装飾されるようにしたいです。 ブログの機能としてよくあるものですが、テキストエリアの下にJavascriptで表示される方法・仕組みはわかるのですが、テキストエリア内にタグが入ってしまいます。 そうではなくて、テキストエリア内で文字を入れて選択し、ボタンを押すと、タグが入らずテキストエリア内で表示が変更される方法を探しています。参考サイト・サンプルサイト等をご存じでしたら、教えて下さい。
WYSIWYGではないHTMLエディタを導入する | freo.jp
概要 記事の投稿時、常にHTMLを直接編集したいという場合、 templates/internals/admin/entry_form.html templates/internals/admin/information_form.html templates/internals/admin/page_form.html にある id="tiny_mce" という箇所を削除すれば、普通のテキスト入力欄になります。ただし、この状態ではHTMLの挿入が少し面倒ですし、メディアの挿入も機能しません。 そこで、WYSIWYGではないHTMLエディタとして markItUp! の導入方法を紹介します。（メディアの挿入も機能するようにします。） 広告 詳細 markItUp!を導入すると、以下のような画面でHTMLを編集できるようになります。 導入するには、以下のファイルをダウンロードして解凍してくだ
サイトのデザインをカンタンにカスタマイズできるjQueryのWYSIWYGサイトエディター「stiqr」
ブログやサイトのデザインで、画像が横にはみ出しているとカッコよく感じたりすること、ありますよね。 しかし、それを実現するには割と高度なCSSの知識が必要になってきます。 今回は、それをカンタンに実現できてしまう機能を実装出来るjQueryプラグインをご紹介。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! 「stiqr」は、HTMLサイトだけでなく、WordPressやBlogger、Tumblrを、カンタンにWYSIWYGサイトエディターで編集出来るようにしてしまうjQueryプラグイン。 ２行のコードをテンプレートに追加し、アカウントを設定するだけで利用可能になってしまいます。 ビフォーアフター ↑このようなデザイン変更を、ページを開いた状態でカンタンにおこなうことができます。 → サンプルペ
まだまだあった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
軽量でデザインが良い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エディタコンプリート
CLEditor の構造 | tnomuraのブログ
CLEditor でWISYWIG のエディタを作るのは非常に簡単だ。jQuery と CLEditor のライブラリを head タグの中でインポートした後。head タグの中に次のスクリプトを記述するだけだ。 ただし、エディタ用のテキストエリアを body の中に <textarea id="#input"></textarea> で記述しておく必要がある。 <script type="text/javascript"> $(document).ready(function() { ('#input").cleditor(); } </script> 言い換えると、CLEditor プラグインをインポートした後は、clediter(cssセレクタ） で body の中の任意のテキストエリアタグをエディタに変えることができる。セレクタが複数のテキストエリアを検出した場合は複数のエディター
Getting Started - CLEditor
CLEditor is shipped with the following files. It is recommended that you install these files into a folder called cleditor with a subfolder called images. jquery.cleditor.min.js - jQuery Plug-in (minified) jquery.cleditor.js - jQuery Plug-in (source) jquery.cleditor.css - Style Sheet images/buttons.gif - Toolbar Button Image Strip images/toolbar.gif - Toolbar Background Image When installing plug-
NicEdit(WYSIWYG editor)の設置方法 - ゆうじろう日誌
雑記です。 ウェブサイトに設置できるWYSIWYGエディタは数多く存在していますが、 いろいろと試した結果、NicEditが簡単に導入でき、軽快に動作してくれるので、 NicEditを使用する事にしました。 設置方法を次に記載します。 １．http://nicedit.com/index.phpより、NicEditをダウンロード。 ２．機能の選択画面が出てきます。 特殊な事を行わなければ標準でよいです。 ３．Zipファイルを解凍 ４．解凍した,「nicEdit.js」、「nicEditorIcons.gif」をWebサイトに設置 ５．Webファイル（HTML or JSP or Other)に次のコードを設置 # 適切な箇所に設置してください。 <!-- 入力エリア (設置箇所：Bodyタグのどこか） --> <textarea style="width: 200px; height: 1
NicEdit 日本語版
NicEdit は、Brian Kirchoff 氏が MIT ライセンスで公開している軽快な WYSIWYG HTML エディタです。MIT ライセンスに基づき、日本語版を作成しましたので、よろしければどうぞ。ファイル数が少ないので、いろいろなツールに組み込みやすいと思います。IEで動かなくなっていた不具合を修正しました。(2010/01/16) (2016年11月28日(月) 午後8時23分43秒 更新) Tweet 「NicEdit」は、おととしから昨年初頭にかけて日本でも話題になった、軽量・軽快な WYSIWYG HTML エディタです。作者の Brian Kirchoff 氏により、MITライセンスで公開されています。Brian Kirchoff 氏に心より感謝いたします。 今回、MIT ライセンスに基づき、日本語版を作成しました。ただし、株式会社CMONOS と Brian K
Javascriptを使用したフリーWYSIWYGエディタ・10選 - フリーでWebデザインとかやってる紳士。
2012年5月29日追記：jQueryベースのWYSIWYGエディタ「Redactor」 百式さんで「Redactor」というjQueryベースのWYSIWYGエディタが紹介されていました。細かな検証はしていませんが、jQueryを使用しているため、実装のハードルは低そうです。TinyMCEを「使わない理由」になるかどうか？ 現在のところ活発にアップデートされてるようですし、ざっくりとロードマップが示されていることにも期待がもてます。ちなみにIE6には非対応ですので、日本のビジネスユースではまだ厳しいかもしれません。 http://redactorjs.com/ この情報は2009年9月現在のものです。2011年9月追記 最近はもっぱらTinyMCEを使用。機能が豊富（不要な機能OFFも可）、新しめのニーズもキャッチアップしてくれそう、Webサイトも2年前からリニューアルされ気合が伝わって
自作のフォームに TinyMCE を導入して WYSIWYG エディタにする方法 | JavaScript | 阿部辰也のブログ――人生はひまつぶし。
以前、MT4 のお勧め WYSIWYG エディタ TinyMCE-MTPluginというエントリでも紹介した TinyMCE ですが、元々は WYSIWYG(なんかボタンが沢山あってワープロ感覚でHTMLを編集できるやつ)エディタ用の汎用スクリプトなので、Movable Type 等の CMS だけでなく、当然自作のフォームにも導入することができます。 というわけで、今回は自作のフォームに TinyMCE を導入して、WYSIWYG エディタにする方法の解説です。 TinyMCE のソースをダウンロードする TinyMCEのサイトで、本体のソースをダウンロードしましょう。 ダウンロードページから、最新の Main package をダウンロードすれば良いと思います。 圧縮ファイルを解答すると、「examples」「jscripts」というディレクトリが出てきます。 これをまとめて、WYSI
『高機能でカスタマイズも容易なWYSIWYGエディタ [CKEditor]』
CKEditor は、高機能でありながらもカスタマイズも可能で、ブログの書き込み画面のようなボタンによる編集を容易に実現できるWYSIWYGエディタです。 デモページ も同サイト内に公開されています。 WYSIWYGエディタは、数々公開されていたりしますがあまりにも多機能すぎるとアプリに適用した際に、ユーザーが使いこなせなかったり、複雑すぎるところからサポートが返って面倒になったりもします。 なので、提供される機能からさらに一部を公開したり、アプリの画面要件に沿ってうまく組み込めたり出来るものが無いかを探しているときに見つけました。 しかも日本語に対応してくれていますので、ボタンの説明（alt属性）がちゃんと日本語で表示されます。 また、フォーム要素（テキストボックスやラジオボタン、チェックボックスなど）を埋め込む機能もあるため、カスタマイズ次第ではCMSのアプリを作ることも可能かもしれま
![『高機能でカスタマイズも容易なWYSIWYGエディタ [CKEditor]』](https://cdn-ak-scissors.b.st-hatena.com/image/square/d870572cc1f6bb7afefc46722b77ccf165799944/height=288;version=1;width=512/https%3A%2F%2Fstat.ameba.jp%2Fuser_images%2F20100513%2F00%2Fitboy%2Fe2%2F1d%2Fj%2Fo0705058110538982160.jpg)
prototype.jsでクロスブラウザなWYSIWIGエディタ - AUSGANG SOFT
これは何？ prototype.jsベースで、IE、Firefox、Opera、SafariをサポートするWYSIWYGエディタライブラリです。 車輪の再発明もいいところなのですが、なるべくシンプルなWYSIWYGエディタライブラリが欲しくて作りました。 どんなもの？ ↓使ってみてください。RSSリーダーで購読されてる方は、こちらからご覧ください。 "コードを整える"のチェックをはずすとブラウザ本来のHTMLを出力します。 文字サイズの変更は、Firefoxのみ動作します。 基本コード サンプルはこちらからダウンロードできます。 まだ荒削りなので、実際に使えるかわかりませんけれど。 <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="crossedit
ユーザーが簡単にHTMLを入力できるWYSIWYGエディタ ベスト3 - リート開発者ブログ
こんにちは。リートの satoshi です。 前回の投稿より、少し時間が空いてしまいましたが、今回はWYSIWYGエディタについてご紹介したいと思います。 WYSIWYGエディタって WYSIWYGエディタというのは、ブログ記事を書くときにフォントサイズを大きくしたり、見出しや色を変更したり…といったことをボタン一つで簡単に操作ができるとても便利な機能です。 今回はその中でも使えるエディタベスト3をご紹介します！ WYSIWYGエディタベスト3 私が選んだのは TinyMCE, CKEditor, NicEdit の3つです。3つともデザインはもちろんのこと、使い勝手がとても良かったです。 それでは3つのエディタについて詳しく紹介していきます。 TinyMCE TinyMCE は社内や個人的な利用用途では制限無く使えるエディターです。商用利用の場合は、$345 から利用出来ます。こちらは、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MSN Japan - ニュース, 天気, メール (Outlook, Hotmail), Bing検索, Skype
[APM2 ヘルプ] [APM ヘルプ]
ASP.NET / PHP で、WYSIWYG 編集できる画面をつけたいのですが、簡単に導入できるコンポーネントみたいなのないでしょうか？
pixture.com - pixture リソースおよび情報