ブラウザ上で画像やテキストを自由に編集する方法 | 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
技術メモ帳 - 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
簡易HTMLエディタを実装する - とほほのWWW入門
トップ How To 簡易HTMLエディタを実装する サンプル ウェブ上で簡単なHTMLエディタを実現するサンプルです。IE5.5 以降で動作します。下記の枠内に文字を入力したり、範囲選択して [B] ボタンを押したりしてみてください。 入力したデータをフォーム経由でサーバーに転送すれば、タグを知らなくても入力可能な書式付き掲示板などに応用できると思います。 コード コードを下記に示します。<div> や <p> などのタグに contenteditable 属性を追加します。document.execCommand('bold') は、現在選択されている領域を太字にするメソッドです。 <style> .btn { width: 70px; margin: 5px; } .edit { text-align: left; background-color: #ffffff; height:
最速インターフェース研究会 :: 編集インターフェースを考える
行番号付きのエディタのサンプル。 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 Reboot
Mozilla — 利益ではなく、ユーザーのためのインターネット
MSDN ホームページ
https://support.microsoft.com/ja-jp/help/188864
SCRAPBLOG : designMode
Google Search
Google Search
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