- 2009-02-21
- JavaScript
What You Code Is What You Get.
実は地味に進めてました。
めんどくさいのでまとめて投稿、すいません。。。
[実装2-1 入力補完候補表示]
手始めにカーソル位置の文字を取得して、補完候補を選ぶとこまでやりました。
結果がこちら→Editor2.1
<aと入力すれば、<a>、<adress>等と表示されます。
※ 候補が貧弱なのはキーワードを少ししか登録していないからです。
お世話になったサイトをあげておきます。
textareaの選択範囲を取得し、前後に文字列を挿入する - Archiva
前回以上にこのエントリに頼りっぱなしでした。
上のエントリを理解するために見たMSDN達。
duplicate
moveToElementText
setEndPoint
[実装2-2 カーソル座標にBOX表示]
2-1の候補をカーソル位置に表示しなくちゃだめなので、
まずはただのdivを表示してみることにしました。
結果→Editor2.2
textarea内で入力すれば、そのすぐ右下にBOXが移動します。
参考サイトはこちら。
テキストエリア内のキャレット座標を取得する - Webと文字
getBoundingClientRect()を使って要素の絶対座標を求める - 素人がプログラミングを勉強するブログ
[実装3 入力補完実装]
パーツは揃ったのでいよいよ実装。
ついでにjQueryプラグイン化。
必要なDOM要素は動的に作成するようにし、
複数のtextareaに対応しました。
※ あわせてツールバーを整理。
選択範囲変換、置換機能も実装しました。
Editor3
参考。
jQuery のプラグインを作成する : ブログの新着記事を表示：Goodpic
[実装4 リファクタリング]
ソースコードがあまりにもひどくなっていたので、書き直し。
が、大して変わらず。
他のjQueryプラグインを参考に何とかしようと思います。
※ 何がいいかなぁ…。
uiはちょっとでかすぎるし。
ここまでの成果がこれ↓
Editor4
Editor4-a
（4-aはボタンでエディタ化するサンプル。
上のtextareaの入力内容はすぐ下のdivに反映。
下のtextareaはツールバーなしバージョン。）
[まとめ]
補完候補が少なさを筆頭に不具合はまだまだありますが、ある程度できてきました。
今は、微調整を繰り返している状況です。（Editor5で公開）
そろそろ管理も煩雑になってきたので、どこかにhostingしようと思います。
というわけで連載風ブログでの公開は今回で最後です。
まさか2回で終わるとは思いませんでしたが…；
以上、今回はこの辺で。
Comments:0
Trackback+Pingback:0
- TrackBack URL for this entry
- http://blog.bornneet.com/TrackBack/179/
- Listed below are links to weblogs that reference
- JavaScriptで非WYGIWYGな軽量HTMLエディタを作ろう（最終回） from Born Neet