忍者ブログ

Home > > JavaScriptで非WYGIWYGな軽量HTMLエディタを作ろう(第1回続き)

[PR]

  • 2017-09-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エディタを作ろう(第1回続き)

Home > JavaScript > JavaScriptで非WYGIWYGな軽量HTMLエディタを作ろう(第1回続き)

JavaScriptで非WYGIWYGな軽量HTMLエディタを作ろう(第1回続き)

Share on Tumblr このエントリーをはてなブックマークに追加

What You Code Is What You Get.

前回見た目だけで終了(!)してしまったので続きです。
今度こそ、「ボタンをクリックしてタグを挿入」までやります。

[実装1.2]

では、早速作っていきます。

といってもどうやればいいのかさっぱり検討がつかないので、
それらしきことが載ってるサイトを探してみる。

あった…が消えてる。
ので、Internet Archiveで。
転載と思われる記事もあるのでこちらを見たほうが良いかも。
  (ご存知の通りInternet Archiveはクソ重いので)

他にもいろいろライブラリとかあったけど、これが一番よさそうだったのでベースにさせてもらうことに。
あと、こちらもtextareaの選択範囲を取得し、前後に文字列を挿入する - Archivaも参考に。
Archivaさんには日ごろからいろいろと助けられておりますm(_ _)m

できたコードがこれ↓
※ substringをsliceに直しました。(2009/02/11 17:04)
※ replaceで無駄に正規表現使ってたのをやめました。(2009/02/11 19:17)
⇒ 定期的に修正が入りそうなのでブログに反映するのやめます。
  最新のコードは次公開するサンプル参照ってことで。
  (どっかのリポジトリにおこうかなぁ。。。)

obj.insert = function(s) {

	if (typeof s == 'undefined') throw 'ArgumentError';

	// カーソル移動位置(#{cursor})を取得後、削除
	var cursor = s.indexOf('#{cursor}');
	if (cursor == -1) cursor = 0;
	s = s.replace('#{cursor}', '');

	// focusしないとIEでbodyに挿入されたりする
	// Firefoxでもボタンで挿入後にfocusが戻らない
	textarea.focus(); 

	// for IE
	if (document.selection) {
			
		// 選択範囲を取得
		var range = document.selection.createRange();

		// 選択中のテキスト引数sで置き換え(現在のカーソル位置にsを挿入)
		range.text = s;

		// カーソルがrange.textの最後になるので戻す
		var back = s.length -  cursor;
		range.move('character', -back);

		// 現在のカーソル位置を反映する(これやらないと水の泡)
		range.select();
	}

	// Firefox
	// inかundefinedあたりで判定しないとselectionStartが0の時ミスる
    else if ('selectionStart' in textarea) { 

		// スクロールバーの位置を保存
		var top = textarea.scrollTop;

		// 選択範囲の開始・終了位置を取得
        var start = textarea.selectionStart;
        var end = textarea.selectionEnd;

		// 開始位置と終了位置の間(現在のカーソル位置)にsを挿入
        textarea.value = textarea.value.slice(0, start) + s + textarea.value.slice(end);

		// カーソル移動位置に移動させる
		var index = start + cursor;
        textarea.setSelectionRange(index, index);

		// スクロールバーを戻す
	    textarea.scrollTop = top;
    }

};
insert('<a href="#{cursor}"></a>')

と呼び出せばtextareaに挿入されます。
※ #{cusor}の部分にカーソルを移動してます。
  (スマートじゃないけどわかりやすいし応用もきくので)
処理の詳細はコメント参照。

肝心の動くサンプルはEditor1.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エディタを作ろう(第1回続き) from Born Neet

Home > JavaScript > JavaScriptで非WYGIWYGな軽量HTMLエディタを作ろう(第1回続き)

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

Page Top