概要
オフライン環境でも使えるブラウザベースの簡易マークダウンエディタを作成した際に知ったことなど、 箇条書きな内容です。
Tips
<pre>
と<div>
の違い。contenteditable属性と合わせて使う場合、preは改行やスペースなど入力を入力したまま保持(入出力)してくれる が、divだと改行など特にエスケープされてしまうので、 contenteditableと使う場合はpreを使う方がベター<head>
に<style>
タグでcssを書くとパースがシビアになりすぐ変な挙動になるので、個々のhtmlタグのstyle属性に直書きする。今回作成した簡易的なマークダウンエディタなど、 htmlが少ないなら有効。- dataURIでhtml、特にマークダウン書式を書くならマークダウンんで多用する「#」をURLエンコードに合わせることを意識しておく。#は「%23」で表現される。
- tabキーなど、文字入力は色々気を使わなくちゃいけない。onkeydownで処理するよりonkeyupで処理した方が都合が良いことが多い。
- contenteditableなhtmlで参考にすべきはTwitter。Twitterすごい。
- dataURLではWebStorageが使えない。
- dataURLではlocationAPIが使えない(Not allowed to navigate top frame to data URL)