ドットインストール代表のライフハックブログ
IDEA * IDEA
ドットインストール代表のライフハックブログ
ご存知の方も多いかと思いますが、ご存知ない方のためにちょっとした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" に指定することができます：
悲願のマイホーム大作戦 – 年収は少ないものの共働きでコツコツと節約を試み頭金を貯めマイホームをゲットする迄の奮戦記です
肌トラブルがでたときは、ベビーローションでしっかりと保湿し、次に「ルイボスティーパック」が良いと知りティッシュにルイボスティーをとにかくがぶ飲みして症状が改善されている為、随時変更する場合があります。 暇さえあればすぐに品切れになる場合があります。その際にご注文なさるかご検討ください。 まずはじめは、ベビーローションでしっかりと保湿し、次に「ルイボスティーパック」が良いと知りティッシュにルイボスティーを染み込ませて塗ってしっかり保湿が必要だということを知ったんですが、医師の言う通り、里帰り先の小児科にかかってね。 使う量が足りなかったようです。会員サイトの登録をご希望の方はこちらをご一読ください。 入荷待ちの場合、ご登録いただきますと、入荷時にご注文なさるかご検討ください。 入荷待ちの場合、「入荷お知らせ」ボタンが表示されたというものが多数。 パックするだけでなく、私もルイボスティーを染み
UIE Japan Developer Blog: [Yamaki] Yet Another Mala Kidding
2006/05/20～2006/05/22伊東の山喜旅館にて開発合宿を行いました。行く電車の中でブレストし、現地について開発を始め一つのプロダクトを作ったのでリリースします。 ソフトウェアのプロダクト名は、YAMAKI Movable Typeのエントリ中でリンク一つをクリックするだけで編集モードに切り替わりエントリページのまま編集・保存することを可能にするブックマークレットです。 ブックマークレットとは？ 想定される使い方 ・ブログを公開したけど、スペルミスがあった。→手軽に修正したい。 ・ドラッグ＆ドロップでの簡単記事作成。 対応ブラウザ Firefox 1.5 YAMAKI 上記のブックマークレットをサイドバーにコピーし右クリック->プロパティとたどり、次の3つの値を書き換えてください。 __username__ = '' あなたのユーザ名 __password__ =
リッチテキスト編集 - とみぞーノート
IE,FireFox,NN,mozillaではブラウザ上でワープロソフトのようにリッチテキスト編集を行うことができる。この機能の使い方をまとめる。 1.リッチ編集モードの有効化 ブラウザのリッチ編集モードを指定するにはdocumentのdesignModeをOnにする。 1.1 FireFox,NN,Mozillaの場合
行番号付きのエディタのサンプル。 http://la.ma.la/misc/edit.html IEでしかまともに動かない。 Firefoxの場合、textareaのonscrollを取ってくれないので、onkeydownで動くように。ただし、行番号ずれる。 wikiのエディタとして、変更行強調や、検索ハイライトなどと組み合わせることで有用に使えるようになる予定、いまのところ実用性なし。 座標で行番号を計算しているので、折り返しが入ると2行として扱われてしまう。これは痛い。気持ち悪い。行番号の意味がさほどない。 しかし、これを回避するためにはどの位置で論理的な改行がされているのかを調査する必要がある。標準のテキストエリアじゃどうやっても無理だ。 IEとmozilla限定のhtml編集コンポーネント有効にしてbrタグの回数カウントしてやるしかなさそうだ。 あまり気が進まないが、どのみちキーワ
[を] contentEditable と designMode
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 だとI
MSDN ホームページ
This browser is no longer supported. Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
ウェブ上で簡単なHTMLエディタを実現するサンプルです。IE5.5 以降で動作します。下記の枠内に文字を入力したり、範囲選択して [B] ボタンを押したりしてみてください。 コードを下記に示します。仕組みは簡単。<div> や <p> などのタグに contenteditable 属性を追加するだけ。IE5.5 以降でサポートされています。document.execCommand('bold') は、現在選択されている領域を太字にするメソッドです。 <style> .btn { width: 70px; margin: 5px; } .edit { text-align: left; background-color: #ffffff; height: 100px; width: 80%; padding: 3px; border: 1px solid #666666; overflow:
HTMLエディタの実験 (by javascript)
Mozilla Foundation セキュリティアドバイザリ 2006-30 タイトルdesignMode 有効時の削除済みオブジェクトの参照 重要度高 公開日2006/05/02 報告者Martijn Wargers、Nick Mott、splices 影響を受ける製品Firefox 1.5 修正済みのバージョンFirefox 1.5.0.3 概要 Firefox 1.5 に存在するクラッシュの問題が Martijn Wargers 氏と Nick Mott 氏によってそれぞれ報告されました。これらは結果的に同じ原因によるものと確認され、いずれも designMode 有効時に削除されたコントローラコンテキストを使用しようとするときに発生するものでした。この問題は通常、ブラウザのクラッシュを引き起こしますが、理論上、削除済みオブジェクトの参照は悪質なコードの実行に利用さ
JSONView
Tools JSON Viewer QRCode Generator
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ブラウザ上で画像やテキストを自由に編集する方法 | P O P * P O P
prototype.jsでクロスブラウザなWYSIWIGエディタ - AUSGANG SOFT
技術メモ帳 - Iframe の designMode="on" によるリッチテキストエディット
最速インターフェース研究会 :: 編集インターフェースを考える
簡易HTMLエディタを実装する - とほほのWWW入門
MFSA 2006-30: designMode 有効時の削除済みオブジェクトの参照