数学、電気の勉強始めました!プログラムにも挑戦しています!|ω・)ノ

ねごとめも背景

# ねごとめも

# カウンター

# プロフィール

negotoy

Author:negotoy
電気の勉強始めました!
テキストエディタを使ってプログラミングに挑戦中。
fc2 ブログに公開しているテンプレート等は、自由にカスタマイズして、ご活用ください。
プログラム実行の前に必ずコードの確認をお願いします。

# 最新記事

# カレンダー

03 | 2017/04 | 05
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 - - - - - -

# スポンサードリンク

{ <pre></pre> タグ版のテキストエディタ作成しました }

ホームページ更新しました → 
{ 要素からプレーンテキストを取り出す関数の作成 }

javaScript と contenteditable 属性を利用して、
テキストエディタを作成していく過程で、
取得した innerText の値が
ブラウザによって、違うのに気付いた。
確認した範囲では、 IE と firefox は、同じ。
chrome は上の2つとは違う値を返してきた。
chrome は、 div, p, br をきちんと成形した
値を返してくる。
ほかの2つは、 ブロック要素も
改行として返してくる感じ。
例えば、一行分の文字列を p タグで囲い、
2つだけ配置すると、改行は一箇所。
IE と firefox は、2つの改行として、
値を返してくる?
詳しいことは分からないので、
どちらが正しいのか判断できない。_(:3」∠)_

innerText の値を成形して、出力していたので、
chrome とほかの2つでは、
違う処理が必要になってしまった。

成形する前のタグと innerText を比較して、
改行を足したり引いたを試してはみたけど、
挿入される タグをうまく見分ける方法が
分からなかった。

アレコレ、試しながら、
div, p, span, br, #text の要素を使用して、
構成された内容であれば、
innerText の値を取得出来る関数を、書いてみた。

{ innerText の値はブラウザによって違う? }

aaaaa

00000
bbbbb
11111

ccccc

y
x
z

22222ddddd
ブラウザの
innerText プロパティ
innerText 取得
div タグ

取得クリックで div タグの innerText を
pre タグ内へ出力します。
chrome では、高さが変わること無く出力されますが、
他のはでは、高くなってしまうと思います。

div タグの中の要素には、
padding, margin を 0 に指定しています。

{ 作成した innerText メソッド }

aaaaa

00000
bbbbb
11111

ccccc

y
x
z

22222ddddd
自作した
innerText 関数
innerText 取得
div タグ

入れ子が繰り返されてような複雑なものでは、
エラーが出るかもしれません。

同じ高さで出力されると思いますが、
正しいかどうかは、分かりません。_´ω`)_

{ div タグの innerHTML }



作ってるの、エディタとか言ってますけど、
テキストエリアに色付き文字を出力するだけのものです。(*‘ω‘ *)

前回作成したテキストエディタ?
→ { contenteditable 属性を利用したテキストエディタの作成 }
今回の
→ { javascript で動作するテキストエディタの作成( 2 ) }
あと、こちらのサイト→( jsdo.it )にプログラムを公開してみました。

ブログのページによっては、 css の ID がか重なったり、
javaScript の関数が重なったりして、
レイアウトが崩れたり、スクリプトが正しく動かなかったりしたので、
ホームページ を作ったのだけど、
こういう便利なサイトもあるのね。。しらなかった。_(:3」∠)_
ホームページは、更新のリンク付けが非常にめんどくさい。


今回のは、正規表現の機能を追加してみました。
動作確認やって、 jsdo.it に公開したのだけど、正規表現を [^xyz] の値で処理させると
ブラウザがクラッシュしてしまう事が分かりました。
ええええ、と思って、一回目の処理の回数を取ったら 8000回 、
それをもって、二回目、三回目・・・の処理へと。。。
原因は、正規表現を使った処理のやり方でした。
一回目の処理で、一回目にマッチした文字を、書き出す html タグを付けて出力。
二回目は、一回目に書き出したダグ付の文字列に対して、処理をやっていたから、
付け足したタグの文字列の中に、マッチした文字が含まれていると、
無限ループに近い状態になり、ブラウザがクラッシュしていたようです。
このことに、気づかずに公開してました。
出来る範囲で、一応、修正はしました。

正規表現には、無限ループってのがあるらしいです。
ココは、使うひとの判断に任せます。ヽ(´ー`)ノ





使用ブラウザ:chrome
HTML5から導入された属性に contenteditable というのがあるらしい。
これは、前回の { テキストエリアに色付き文字を表示出力する } を作成する過程でみつけたもの。
この属性は、html タグの div タグなどを編集可能なテキストエリアにしてしまうもの。
使いみちは、いまいち分からないけど、面白い機能だと思った。

前回のは、テキストエリア要素に、JavaScript で色付きの文字を表示させましたが、
これは、見た目そう見えるだけで、テキストエリアは透明にして見えないように設定しています。
テキストエリア要素の中にタグを設置しても反映されないので、文字に色を付ける事はできません。
なので、その下に、pre タグを重ね合わせ、文字が入力されると、
pre タグに対して処理を行うものでした。

しかし、この contenteditable 属性は、色などを指定したタグを
直接設置することが出来るとの記事を見つけたので、
さっそく、試してみました。
最初は、 div 要素を使ってテキストエディタ風の色文字の出力に挑戦したのですが、
改行をうまく処理する JavaScript を書くことが出来ません。_(:3」∠)_

contenteditable 属性を利用した簡易テキストエディタ

プログラムはこちらのサイトで公開しています
→ contenteditable 属性を利用したテキストエディタの作成


なので、改行のエスケープシーケンスが使用できる pre タグで試してみると、同じく動作。
改行もエスケープシーケンスが使用出来たので、処理が楽になり、
目標の色付き文字を出力する所までは作成する事が出来ました。


作成に使用したブラウザは chrome 
この要素の処理を行う JavaScript には互換性がないので、chrome 以外では動作しません。
なので、ブラウザのバージョンが上がると動かなくなる可能性もあると思います。


fc2 ブログにもあるテキストエリアの文字が色付で表示出来る html エディタ。
これは、JavaScriptで動作してるのかな?
詳しくは分からないけど、{ テキストエリアに色付き文字を表示出力する } に挑戦してみました。
本格的なものは無理なので、触りの部分のみ。
テキストエリアに入力した文字を色付で表示させる所まで。

テキストエリアの文字に色をつけるには、透明なテキストエリアと pre タグを
重ねることで、それらしく動作させることが出来ました。

最初に作成したのは、 setInterval 関数でテキストエリアを監視して
文字に色を付けてましたが、
onkeypress イベントが発生したときのキャレットの正しい位置を setTimeout 関数で
遅らせる事で取得出来る事がわかりました。
なので、 setInterval 関数を使わないように修正しました。

キャレットの位置の確認 → テキストエリアのキャレットの位置の取得

JavaScript で動作するプログラムは、
こちらのサイトに置いてます → テキストエリアに色付き文字を出力する( javascript )

{ テキストエリアに色付き文字を出力する:β }

red
blue
green
purple
 red
blue
green
purple
{ 色をつけて出力する文字群 }


ブログのテンプレートに設置している画像拡大機能の
ドラッグ時の挙動をブラウザ外でマウスイベントが発生しても
取得出来るように、javascript を修正。

今までは、要素ドラッグ時、ブラウザの外にマウスポインタが移動すると、
ドラッグイベントが停止してしまっていた。

このことについて、調べてみると、javascript のイベントを html の要素ではなく、
document に登録するとブラウザ外でのイベントの位置情報の取得が出来ることがわかった。

参考にしたのはこちらのサイト様 → マウスをウィンドウ外で離されてもイベントを受け取る

動作確認 → fc2 ブログテンプレート画像拡大機能


# スポンサードリンク