ikmnjrd.github.io

contenteditable(HTML)とdataURIを使う際のTips

Posted on 2022-08-11
目次

概要

オフライン環境でも使えるブラウザベースの簡易マークダウンエディタを作成した際に知ったことなど、 箇条書きな内容です。

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)

参考文献