ＳＱＬの窓
<< Windows のエクスプ… | TOP | jQuery でページを … >>

2018年01月14日


Google Chrome のみ動作する Data URLs を使用した『HTML/テキスト』変換アプリ

 
あれです。data:text/html,文字列 という形式でアプリケーションを書いてみようと思ったんですが、結局 Google Chroem でしか動かなかったという残念なアプリです。ですが、将来何かする時の参考データにはなるだろうと思って記録します。

使用する場合は、コピーしてアドレスバーに貼り付けるだけです。

data:text/html,<label for="check">div/textarea toggle</label> <input id="check" type="checkbox" onchange="if(this.checked){document.getElementById('edit').style.display='block';document.getElementById('div').style.display='none';document.getElementById('edit').value=document.getElementById('div').innerHTML;}else{document.getElementById('edit').style.display='none';document.getElementById('div').style.display='block';document.getElementById('div').innerHTML=document.getElementById('edit').value;}"><div id="div" contenteditable style="border:1px solid #ccc;height:calc(100% - 50px)"></div><textarea id="edit" style="display:none;width:100%;height:calc(100% - 50px);background-color:#f0f0f0"></textarea>


常に使用したい場合は、ブークマークバーにドラッグして名称を変更すれば良いです。

contenteditable 属性を div に適用しているので、他でコピーした HTML がそのままリアルに再現され、toggle すると、textarea に切り替わって転送されます。textarea で記述した内容はそのまま DIV 側にも反映されます。整形はできないので、オンラインツール等を使用するといいと思います。

サイズを calc 使って常に画面に収まるようにしているので、プロジェクタとかで Chrome 内のページとして拡大するといろんな使い方があると思います

▼ DIV に貼り付けて


▼ 切り替えると HTML
タグ：CHROME
【Google Chromeの最新記事】
posted by lightbox at 2018-01-14 00:49 | Google Chrome | このブログの読者になる | 更新情報をチェックする



Powered by Seesaa
container 終わり



✅ フリーフォントで簡単ロゴ作成
✅ フリーフォントでボタン素材作成
✅ フリーフォントで吹き出し画像作成
✅ フリーフォントではんこ画像作成
✅ ほぼ自由に利用できるフリーフォント
✅ フリーフォントの書体見本とサンプル
✅ 画像を大きく見る為のウインドウを開くボタンの作成
✅ CSS ドロップシャドウの参考デモ
✅ イラストAC
✅ ぱくたそ
✅ 写真素材 足成
✅ フリーフォント一覧
✅ utf8 文字ツール
右サイド 終わり
base 終わり