HOME

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

{ svg, javascript で作成したプログラム一覧 }

推奨 ブラウザ : chrome

前回作成した、 { テキストエリアに色付き文字を出力する } の続きです。
まだやってました。_(:3」∠)_

前回のプログラムはこちら → { テキストエリアに色付き文字を出力する( javascript ) }

前回作成したプログラムを作成するなかで、タグの属性に、 contenteditable = true を指定してやると、
div タグが テキストエリアと同じ動きをするとの記事を見つけた。
これは! JavaScript と連携させれば、テキストエディタのように色付き文字の表示が出来るのではと思い、試作してみた。

これが、なかなか大変で、キャレットの位置情報を簡単に取りだせなかったり、
ブラウザで値を表示するコンソールには、取得したい値が出力されているのに、 JavaScript の変数に代入出来なかったり、
改行タグが、 div で挿入されたり、 br で挿入されたりするので、文字が入力されるたびに、
すべてのタグの書き換えをするはめに。


最初は、 div タグに contenteditable = true を指定して、作り始め、
改行をうまく処理できず、、、。
あれこれやって、 contenteditable = true 属性が、 pre タグで動作するか試してみると、
div と同じように動作し、改行もエスケープシーケンスも使えたので、最初から作り直し。
div タグで、改行のエスケープシーケンスを試してみたけど、認識してくれなかった。


今回のプログラムは、前回のように、テキストエリアを透明にしたり、タグを重ね合わせたりしないで作成する事ができました。

動作確認は、やったのですが、うまく動くかどうかわかりません。
エラーすると、キャレットの位置がずれると思います。
また、日本語の文字に色を付ける事もできますが、確定( enter )、改行しないと色が反映されません。

この、プログラムの動作確認は、 chrome ( バージョン : 57 ) ブラウザのみです。
互換性のない、 JavaScript を使用しています。
また、この属性が、新しいとの記事も見ました。
なので、ブラウザのバーションが違うと、うまく動作しないかもしれません。(*‘ω‘ *)


contenteditable 属性について → 君はHTML5の contentEditable 属性を知っているか
contenteditable 属性について → HTML の contenteditable 属性

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

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Document</title>
    </head>
    <body>
        <div>
            <h1>
                Hello World.
            </h1>
        </div>
    </body>
</html>
キャレットの位置 : 0
{ 色をつけて出力する文字群 }


数学の勉強をやり直ししてたりします。_´ω`)_