twitterにどうぞ。この広告は、90日以上更新していないブログに表示しています。2013-10-15オンラインエディタのIME対応などのメモ世の中に存在するオンラインエディタうち、textareaを直接使っていないものの大半が、適切にIME処理を出来ていない。IME周りの処理は厄介なので、とりあえずどういう感じなのかを調べた結果をメモしておく。オンラインエディタの仕組みオンラインエディタの主な目的はsyntax-highlightingとCSSによるカスタマイズである。textareaは、個々の文字の強調や色づけができない。contenteditable="contenteditable">まず始めに思いつくのがHTML5のcontenteditable属性で、これは任意の要素を編集可能にするもの。execCommandというコマンドがあって、これを使うと選択範囲の文字をボールドにしたりできて、リッチテキスト編集のためにあるものなので、一見便利そうである。キャレット(エディタ内の縦棒の点滅するカーソル)の操作が自由にできない、などの点に問題があり、広くは使われていない。次に、非表示のtextareaと、divを使った方法。オンラインエディタの多くがこの手法を使っている。要するに、非表示のtextareaのvalueの変更を監視して、divに反映させるという手法である。divに表示するときにsyntax-highlightingなどをする。うまくいきそうだが、厄介な問題がいくつかある。キャレット単純に、上下左右のキーコードを監視しているだけでは、文字をクリックしてキャレットを動かすことができない。clickを監視して、どの文字をクリックしたのかを頑張って判別する必要がある。文字のドラッグアンドドロップAceは対応しているが、ほとんどのエディタは対応していない。キャレットを独自に実装している場合は細かい動作を再現することが難しい。dropのAPIと、上記のキャレットでの文字クリックの判別の手法を使えばできるはずである。absoluteにして画面外に飛ばすという手法を使っている場合、IMEの変換候補位置が、文字を編集している(ように見える)位置ではなく、textareaが存在する位置になってしまう(画面の右上に飛んだりする)。IMEで入力中でも、監視しているイベントによっては入力が完了するまで発行されないので、入力中に文字が見えなかったりする。inputイベントなど、IME入力中にも発行されるイベントを監視していても、IME入力中であるアンダーラインが表示されない。Eventを使えば解決することができるのであるが、ブラウザ間の挙動の違いや、まあ色々なことがあってほとんど実装されていない。Ace割と良く出来てる。IME周りは独自実装をあきらめて、textareaを一時的に表示するように解決しているので(昔のTextMateなどのように)、ブログを書くなどの目的に使うには、少し辛い。CodeMirrorIME周りは単にvalueをコピーしているだけなので、変換中であることを示すアンダーラインが表示されない。CompositionEventとIME対応textareaがあるとして、IME編集中の範囲を取得する方法はだいたいこんな感じでいけそう。selectionEndで取れるが、IME中は正しい数値が取れない。いじってみた結果、Math.minを使えばうまく調整できることを発見した。その方法を書いておこうと思う。Eventを使って、編集中かどうかと編集中のイベントを保存する。textarea変数はtextarea要素が入ってる。selectionEndをIME入力中にも正しく取得するにはだいたいこんな感じにすればいい。selectionEndは通常の、選択範囲を指す}試しに非表示textareaとdivを使って、カスタムキャレットとIME対応を実装してみた例。ドラッグアンドドロップを実装していないが、とりあえずIME対応が技術的に不可能ではなさそうなことが判明した。ところで、Gyazoを使うとアニメーションgifのスクリーンショットが取れて便利である。doの見分け方と使い方についてなどArchiveはてなブログをはじめよう!javascripterさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。