ブログ作成の基礎６

今回は、JavaScriptの勉強をする。

innerHTML

はじめに、innerHTMLについて学習することにしよう。

<div id="element_div" style="border:1px solid black; padding: 0 30px;">
  <p>id=element_divの領域</p>
  <div>
    <p>階層構造１</p>
    <p>階層構造２</p>
  </div>
</div>

と記述すると、以下のように表示される。

id=element_divの領域

階層構造１

階層構造２

上のid=element_divの内容をhtmlテキストデータとして読み出す場合、

const element_div = document.getElementById("element_div");
let text = element_div.innerHTML;

のようにして、innerHTMLプロパティを利用することにより得ることができる。

上のボタンをクリックしよう！
innerHTMLで読み取った内容を下のテキストエリアに書き出される様子をみることができる。

上のボタンクリックすると、htmlソースコードが表示されることがわかる。 しかし、左側に大きな空白があり、表示が全体的に真ん中に位置しているのを不思議に思うだろう。

htmlソースコードを記述したときに使用したTabや改行コードはWeb表示では無視されるはずであるが、 ここでは無視されずにそのまま反映され、表示されている。 カーソルを空白領域に持っていき、動かしてみればTabの存在を確認できる。

それでは、上のテキストエリアのデータを下に表示されているid="element_div2"の領域にコピーしてみることにする。

const element_div2 = document.getElementById("element_div2");
element_div2.innerHTML = element_textArea.value;

のようにして、上のテキストエリアの内容を下に定義してあるelement_div2の領域に入れてみよう。 以下のボタンをクリックせよ。

  

テキストエリアに何もなければ何も表示されないが、htmlタグ類は解釈され、 新規追加のWebがダイナミックに表示されていることがわかる。

今度は、<div>タグで定義されたdiv領域、この領域はtextareaとは異なりhtml解釈がなされるが、 以下の処理を施し、htmlタグを不活化して単なる文字にしてしまう方法がある。

  document.documentElement.innerHTML = "<pre>" +
      document.documentElement.innerHTML.replace(/</g,"&lt;") +
      "</pre>";

以下のボタンはid=element_div2の領域に記述してあるhtmlコードをソースコード表記に切り替える。

document.execCommand

document.execCommandはどうも廃止されたようだ。 しかし、現実問題として、document.execCommandが利用されているプログラムがあり、これを解読する必要がでてきた。 それゆえここでは、難しい使い方ではなく、基本的な使い方に留めて勉強することにする。

構文は、

document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

aCommandName : 文字列表記で、実行するコマンドの名前を指定
aShowDefaultUI : 既定のユーザインターフェースを表示するかどうかを指示(Mozilla では未実装 false )
aValueArgument : 追加の引数を文字列表記で入力、不要の場合はnull

第1引数で指定するコマンドは50種程あり、そのすべてを説明するのは時間の無駄であり、他を参照してもらいたい。

コマンドbackColorは、文書の背景色を変更する。styleWithCssモードのときは文書の含まれているブロックの背景色を変更する。

document.execCommand("backColor", false, "green")

を実行してみよう。


div3 :

ボックス1のデータをhtml文書と解釈し、ここにWeb表示

パラグラフの中にも数式を\(y=x^2\)のように書ける。また、

\[ y = \int_0^1 f(x)dx \]

のように記述もできる。

上のdiv3領域の中で適当にマウスで範囲選択し、「backColor→green」のボタンをクリックすると、選択したところが緑色背景になる。

何度も繰り返し、選択範囲を変えてボタンクリックすると、緑色背景の範囲が大きくなる。

ソースコード表記に切り替えると、パラグラフ内の選択範囲は一か所のみで緑色背景の設定がなされていることがわかる。 また、複数のパラグラフや数式にまたがる場合は、それぞれで設定がなされている。 つまり、重ね掛けされた部分も含めて常に再設定されるようにコードが修正されているという、 かなり巧妙なテクニックが施されていることがわかる。

ウーン、execCommandが廃止されたそうだが、使わないで同じ処理ができるかどうか、いささか不安になってきた。

execCommandを使わずに同じ処理が可能だろうと思うが、たいへん時間を要する課題のように思える。 また、どこか他のところで既にこの問題に対処している多くの人がいるであろうから、そちらの方を探してみる方が良いだろう。

ということで、探してみた。なんと、やはり、需要が多いようで、提供されている無料のエディタがごろごろしていた。

WYSIWYG無料エディタ

無料エディタにどういうものがあるのか、いろいろと調べてみたら、2003年にCKEditor、2004年にTinyMCEなど、 結構古くから提供されている。 そして、さらに次々と新しいエディタが公表され、無償や商用で有料となるものなど、様々なエディタが存在している。

あまりにもその多さに圧倒されているが、どれを選択したらよいのかという問題が非常に難しい問題として立ちはだかった。

さて、老舗のCKEditorは2021年4月の段階でCKEditor5が最新版であるが、CKEditor4のインストールが容易であったので、それを見てみることにしよう。

CKEditor4のサンプルページ

CKEditor4のサンプルページ（数式入力可）

たくさんボタンがありすぎて少々慣れるまで大変かもしれないが、Wordと似ている部分も多いので、慣れれば使いやすいだろう。

ソースボタンをクリックするとhtml文書が表示されるようになっているので、作成したhtml文書をWebサーバに登録すれば出来上がりとなる。

CKEditorは有料ということなのだが、どうも基本的には無料らしい。今回の設定は完全無料で設定したので、もしかすると、一部使えなくなっているかもしれない。

tinyMCEのサンプルページ

一応、tinyMCEも入れてみたけれど、数式の設定ができていない。今後の課題かなあ～

2024/11/1 ＊注　現在、無料エディターへの公開は中止しています。

back    next