ブラウザ上で画像やテキストを自由に編集する方法 | P O P * P O P
ご存知の方も多いかと思いますが、ご存知ない方のためにちょっとしたTipsをご紹介。Internet Explorer5.5以上限定ですが。 Webサイトをブラウザ上で自由に編集できてしまうテクニックです。やり方は簡単。下記のJavaScriptをアドレスバーに打ち込むだけ。 javascript:document.body.contentEditable='true'; document.designMode='on'; void 0 こんな（↓）感じです。 ドラッグ＆ドロップで画像を動かせる他、テキストも自由に書きかえることができます。これはコンテンツをブラウザ上で編集できる「contentEditable」というタグを活用したTipsですね。 » contentEditableについて スクリーンショットを取る時にいらない画像を簡単に消したりできるのは便利かも。diggからの情報でした
[を] 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
リッチテキスト編集 仕様
改訂：2002年11月15日 リッチテキスト編集コントロールです。（訳注；以下の URI もご参照下さい：Rich-Text Editing in Mozilla 1.3） リッチテキスト編集を可能にする： ある文書があるとき、"designMode" 属性を加えて、それを "on" にして、編集可能な文書を手に入れることができます。 例えば、Javascript では、"edit" の id をもった iframe（インラインフレーム）があれば、次のようにしてその contentDocument を手に入れ、designMode を "on" に指定することができます：
技術メモ帳 - Iframe の designMode="on" によるリッチテキストエディット
こんな属性があるのを知らなかった。 実際には、Iframe の属性ではなさそうだが。 どうも、javascript で以下のように指定してあげる事により、 リッチなテキスト編集機能が有効になるようだ。 iframe.contentDocument.designMode = "on"; ちょっとサンプルを作ってみた。 選択範囲の色変えたり、画像貼付けたり出来ます。 http://gomibako.hahaue.com/rth.html (Firefox only) 実際に文字の状態を変化させたりしたい場合は、 同要素の execCommand メソッドを使用すればよい。 たとえば、文字を太字にしたい場合は、 以下のように指定するだけで良い。 iframe.contentDocument.execCommand("bold",false,null); 色を赤くしたければ、 iframe.con
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
designMode - Google 検索
2022/11/28 · document.designMode は、文書全体を編集可能にするかどうかを制御します。妥当な値は "on" および "off" です。仕様書では、このプロパティの既定値 ...
簡易HTMLエディタを実装する - とほほのWWW入門
ウェブ上で簡単な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:
最速インターフェース研究会 :: 編集インターフェースを考える
行番号付きのエディタのサンプル。 http://la.ma.la/misc/edit.html IEでしかまともに動かない。 Firefoxの場合、textareaのonscrollを取ってくれないので、onkeydownで動くように。ただし、行番号ずれる。 wikiのエディタとして、変更行強調や、検索ハイライトなどと組み合わせることで有用に使えるようになる予定、いまのところ実用性なし。 座標で行番号を計算しているので、折り返しが入ると2行として扱われてしまう。これは痛い。気持ち悪い。行番号の意味がさほどない。 しかし、これを回避するためにはどの位置で論理的な改行がされているのかを調査する必要がある。標準のテキストエリアじゃどうやっても無理だ。 IEとmozilla限定のhtml編集コンポーネント有効にしてbrタグの回数カウントしてやるしかなさそうだ。 あまり気が進まないが、どのみちキーワ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Digg - CRAZY cool javascript : Edit whatever you want on ANY page : Images, Text.
MSDN ホームページ
https://support.microsoft.com/ja-jp/help/188864
SCRAPBLOG : designMode
contentEditable - Google 検索
JSONView
[を] ContentEditable Tips
http://www.favorite-labo.org/diary.cgi?field=%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%3C%3EJavaScript