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()で各
contentEditable と designMode 2005-03-11-4 [Programming] [2005-03-11-1]で、＠Wiki（あっとうぃき）<http://atwiki.jp/> の 「ワープロモード」はContentEditableを使っていると思われると書いた ら、eto氏から contenteditableじゃないよ。FireFoxでも動くし。 とのコメントを頂いた。JavaScript のソースを見てみると、designMode というものを使っているらしい。ちなみに atwiki の JavaScript ソース は、Zope で使われている Epoz というものみたい。ソースの頭に Epoz - a cross-browser-wyswyg-editor for Zope って書いてある。 で、この designMode だとIEだけでなくFFでも
JavaScriptのdesignmodeに関する質問です。 iframeにdesignmode='on'を設定し、WYSIWYGな編集環境を開発しています。 これにつきまして、単純にdesignmodeを実装するだけでは、iframe内でENTERキー押下による改行を行った場合に見た目として二行分の改行がなされ、<p></p>タグが挿入されるという挙動になります。 （一行分の改行を行い、<br />タグを挿入するためにはSHIFT+ENTER）。 直感的な操作を実現する上では、ENTER押下時には一行分の改行を行い、<br />タグ挿入という挙動に変更したいのですが、その方法をご存知の方、教えていただけないでしょうか。
ご存知の方も多いかと思いますが、ご存知ない方のためにちょっとしたTipsをご紹介。Internet Explorer5.5以上限定ですが。 Webサイトをブラウザ上で自由に編集できてしまうテクニックです。やり方は簡単。下記のJavaScriptをアドレスバーに打ち込むだけ。 javascript:document.body.contentEditable='true'; document.designMode='on'; void 0 こんな（↓）感じです。 ドラッグ＆ドロップで画像を動かせる他、テキストも自由に書きかえることができます。これはコンテンツをブラウザ上で編集できる「contentEditable」というタグを活用したTipsですね。 » contentEditableについて スクリーンショットを取る時にいらない画像を簡単に消したりできるのは便利かも。diggからの情報でした
これは何？ 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
こんな属性があるのを知らなかった。 実際には、Iframe の属性ではなさそうだが。 どうも、javascript で以下のように指定してあげる事により、 リッチなテキスト編集機能が有効になるようだ。 iframe.contentDocument.designMode = "on"; ちょっとサンプルを作ってみた。 選択範囲の色変えたり、画像貼付けたり出来ます。 http://gomibako.hahaue.com/rth.html (Firefox only) 実際に文字の状態を変化させたりしたい場合は、 同要素の execCommand メソッドを使用すればよい。 たとえば、文字を太字にしたい場合は、 以下のように指定するだけで良い。 iframe.contentDocument.execCommand("bold",false,null); 色を赤くしたければ、 iframe.con
改訂：2002年11月15日 リッチテキスト編集コントロールです。（訳注；以下の URI もご参照下さい：Rich-Text Editing in Mozilla 1.3） リッチテキスト編集を可能にする： ある文書があるとき、"designMode" 属性を加えて、それを "on" にして、編集可能な文書を手に入れることができます。 例えば、Javascript では、"edit" の id をもった iframe（インラインフレーム）があれば、次のようにしてその contentDocument を手に入れ、designMode を "on" に指定することができます：
肌トラブルがでたときは、ベビーローションでしっかりと保湿し、次に「ルイボスティーパック」が良いと知りティッシュにルイボスティーをとにかくがぶ飲みして症状が改善されている為、随時変更する場合があります。 暇さえあればすぐに品切れになる場合があります。その際にご注文なさるかご検討ください。 まずはじめは、ベビーローションでしっかりと保湿し、次に「ルイボスティーパック」が良いと知りティッシュにルイボスティーを染み込ませて塗ってしっかり保湿が必要だということを知ったんですが、医師の言う通り、里帰り先の小児科にかかってね。 使う量が足りなかったようです。会員サイトの登録をご希望の方はこちらをご一読ください。 入荷待ちの場合、ご登録いただきますと、入荷時にご注文なさるかご検討ください。 入荷待ちの場合、「入荷お知らせ」ボタンが表示されたというものが多数。 パックするだけでなく、私もルイボスティーを染み
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
