HOME

contenteditable 属性を設定した html タグで作成したテキストエディタ

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

推奨 ブラウザ : chrome

javascript で動作するテキストエディタ作りの続きです。
前々回のプログラムはこちら → { テキストエリアに色付き文字を出力する( javascript ) }
前のプログラムはこちら → { contenteditable 属性を利用したテキストエディタの作成 ( 1 ) }
まだ、やってます。_(:3」∠)_

今、挑戦しているのは、html タグにに contenteditable = true を指定して、
javaScript で作動させるテキストエディタ?の作成です。
javaScript でどこまで出来るのか詳しくはわかりませんが、入力した文字を色付き文字で出力させてみたくて作り始めました。

前回のは、テキストエリアに色付きの文字を出力するだけのものでしたが、
今回は、新しく正規表現の機能を追加してみました。
正規表現にマッチした文字の背景にも色を配置してハイライトさせてみました。
追加と言っても、自分で関数を書いたわけじゃなく、予め用意されている関数を利用しているだけです。(*‘ω‘ *)

また、コードを見直してみたのですが、自分で書いたのに、なにがなにやらの状態になってしまったので
途中から、コードを書き直しました。
スクリプトのコードを書き直したおかげで、ソースが三分の二くらいのサイズになり、
また、関数を呼び出すタイミングなどのこまかい細かい修正も行うことが出来ました。
少し contenteditable 属性の事が理解できたように思います。

前回作成したエディタ?は、複数行選択、変更後の文字に色を反映させることが出来ていませんでしたが、
今回のは、編集直後に色が反映されるように修正しました。
しかし、色をリアルタイムで反映させるための関数が増えてしまい、呼び出す回数が倍になってしまいました。
文字が一文字打ち込まれるたびに、2 回、タグの総入れ替えをしています。
動作がもっさりするときは、keyup にある関数が悪さをしているようです。

今回のは、前回のに比べて文字編集時のエラーは少なくなったように思います。
色を設定した文字と、そうでない文字との境で、多くのエラーは発生します。
これは、キャレットの親要素が変わるためで、その時、値を次の要素に移す処理が必要になります。
その時の値のとり方、処理のやり方を、まだ理解できていません。

今回追加した正規表現を利用した文字検索は、文字数を制限しました。
これは、この機能を試していたとき、ブラウザが複数回クラッシュしたからです。
メモリ不足との警告が出ました。
原因は、正規表現に空白の値を処理させてしまったこと?に、原因があるような。。感じです。
一応、原因は特定して修正した事にしています。ヽ(´ー`)ノ
また、文字数の少ない単語を大量に処理させると、 html タグがエディタ内に出現したりもします。
このあたりも修正でればと思います。

あと、キャレットの位置情報の取り方も修正しています。前回のは文字が入力されないと、
更新されませんでしたが、今回のは、テキストエリアクリックで位置がわかると思います。


この、プログラムの動作確認は、 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
正規表現 : { g: i: m:}
正規表現の文字制限 : 250 字

推奨ブラウザ : chrome

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