目次
HTMLコードをタイプするのが面倒
ブログで、箇条書き(番号あり/なし)が混在した記述を行う場合、手動でHTMLコードをタイプするのが面倒くさくなりました。
例えば、以下のような表示です。
- AAA
- aaa
- BBB
- bbb
こうしたOLタグとULタグが入れ子になった表示を実現するには、以下のHTMLコードを記述する必要があります。
<ol>
<li>AAA</li>
<ul>
<li>aaa</li>
</ul>
<li>BBB</li>
<ul>
<li>bbb</li>
</ul>
</ol>
HTMLエディタの作成を検討
OLタグとULタグの入れ子や、それらのインデント、等に対応した、シンプルなHTMLエディタが欲しいと思い、自分で作成することにしました。
シンプルHTMLエディタ
テキスト入力
HTMLコード出力
使い方
- テキスト入力のエリアに文章を入力
- ULタグ or OLタグを追加する場合は、追加したい文章をマウスで選択した後に、ULボタン or OLボタンをクリック
- インデントを追加する場合は、対象の文章をマウスで選択した後に、> or < ボタンをクリック
- HTMLコードを出力する場合は、HTMLボタンをクリック
ソースコード解説
ＨＴＭＬソースコード
<div>
テキスト入力
</div>
<div class="MyArea" id="MyContent" contenteditable></div>
<div>
<button class="MyBtn" onclick='document.execCommand("insertUnorderedList");'>UL</button>
<button class="MyBtn" onclick='document.execCommand("insertOrderedList");'>OL</button>
<button class="MyBtn" onclick='document.execCommand("indent");'>></button>
<button class="MyBtn" onclick='document.execCommand("outdent");'><</button>
<div>
<br>
<div>
HTMLコード出力
</div>
<div class="MyArea" id="MyHTML"></div>
<div>
<button class="MyBtn" onclick="ShowHTML();">HTML</button>
</div>
<style>
.MyBtn {
width: 55px;
}
.MyArea {
text-align: left;
height: 150px;
width: 80%;
margin-bottom: 5px;
border: 1px solid gray;
overflow: auto;
}
</style>
行番号4では、DIVタグにcontenteditable属性を付加し、DIVタグのエリアをテキストエディタとして使用できるように設定しています。
この機能は、HTML5から導入されたものです。
行番号7～10では、HTMLエディタのコアである、ULタグ、OLタグ、右にインデント、左にインデントの機能が記述されています。
これらの機能を実現するために使用されているのがexecCommand()です。
- insertUnorderedList
- マウスで選択した行をULタグ & LIタグで囲みます
- insertOrderedList
- マウスで選択した行をOLタグ & LIタグで囲みます
- indent
- マウスで選択した行を右方向にインデントします
- outdent
- マウスで選択した行を左方向にインデントします
execCommand()は、上記以外にも様々なコマンドをサポートしており、大変有用な命令です。
しかし、非常に残念なことに、execCommand()は非推奨の命令となっており、今後、ブラウザのバージョンアップが進むことで、使用できなくなります。
JavaScriptソースコード
function ShowHTML() {
const MyContent = document.querySelector('#MyContent');
let MyHTML = document.querySelector('#MyHTML');
MyHTML.textContent = MyContent.innerHTML;
}
上記のJavaScriptは、HTMLボタンに割り当てられており、HTMLボタンをクリックするたびに実行されます。
残念なところ
execCommand()を利用することで、残念な結果になる場合があります。
例えば、以下のケースです。
AAA
- BBB
CCCの行をクリックした後、OLボタンをクリックすると、以下の状態になることを期待するのですが…
AAA
- BBB
- CCC
実際は、次のようになってしまいます。
AAA
- BBB
- CCC
結果的には、execCommand()を利用しても期待する動作にならない場合があるため、何らかの対応が必要となります。
追記
使用するブラウザによって、挙動が異なるようです。
- Firefox バージョン 108.0(64ビット)
- 上記に記載した通りの動作になります
- Microsoft Edge バージョン 108.0.1462.46(公式ビルド)(64ビット)
- 上記の動作とは異なり、CCCの行の番号は「2」となり、期待した通りの動作となります
execCommand()はブラウザによって挙動が異なることが分かりましたので、いずれにしても、代替方法を検討していきたいと思います。
課題
とりあえず、今回はHTMLエディタの作成が初めてであったため、非推奨のexecCommand()を使用した実装を行いました。
今後は、execCommand()の代替について、検討していきたいと思います。
