忍者ブログ

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

[PR]

  • 2017-03-29

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エディタを作ろう(最終回)

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

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

以上、今回はこの辺で。

PR

Comments:0

Comment Form

Trackback+Pingback:0

TrackBack URL for this entry
Listed below are links to weblogs that reference
JavaScriptで非WYGIWYGな軽量HTMLエディタを作ろう(最終回) from Born Neet

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

Search
Loading
Feeds
Links
スポンサードリンク
Ad
デル株式会社
Ad

Page Top