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

ねごとめも背景

# ねごとめも

# カウンター

# プロフィール

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> タグ版のテキストエディタ作成しました }

2017 22 09:20:48

contenteditable 属性を利用したテキストエディタの作成


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

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

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

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

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


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


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


# スポンサードリンク