Home > > JavaScriptで非WYGIWYGな軽量HTMLエディタを作ろう（最終回）

[PR]

2024-11-24

Share on Tumblr

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

Comments:

Trackback+Pingback:

Listed below are links to weblogs that reference: [PR] from Born Neet

Home > > JavaScriptで非WYGIWYGな軽量HTMLエディタを作ろう（最終回）

Home > JavaScript > JavaScriptで非WYGIWYGな軽量HTMLエディタを作ろう（最終回）

Newer
Older

JavaScriptで非WYGIWYGな軽量HTMLエディタを作ろう（最終回）

2009-02-21
JavaScript

Share on Tumblr

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回で終わるとは思いませんでしたが…；

以上、今回はこの辺で。