🌸 はじめに
Web アプリを開発していると、Webブラウザで動作する WYSIWYG（ウィジウィグ）エディタのライブラリを使用するケースがあります。
Tiptap、Editor.js、Quill 等ありますが、実際にどうのような仕組みで Web ブラウザ上でテキストを編集しているのでしょうか？
今回は、この「 Web ブラウザ上でテキストを編集できる」HTML の contenteditable 属性 に着目して記事を書こうと思います。
contenteditable 属性とは何ぞ？
wikibooks では以下のように解説されています。
contenteditable 属性は、要素の内容をユーザーが編集可能にするかどうかを指定するために使用される属性です。この属性を使用すると、特定の要素をブラウザ上で直接編集できるようになります。属性値には、true（編集可能）、false（編集不可）、またはinherit（親要素から継承）のいずれかを指定できます。
要するに『何かしらの HTML の要素に contenteditable="true" を指定すると、その要素はブラウザで編集できる！』ということらしいです 🥰
従来の HTML では、Web ブラウザ上でテキストを編集して送信する際、form タグを使用して、その内側に input タグや textarea タグを記述して送信処理をしていました。
しかし、上記の説明にもある通り contenteditable 属性 を活用すれば、form を使用しなくても Web ブラウザ上でテキスト編集でき、また編集したコンテンツをサーバーに送信したり、ローカルで保存したりすることも可能です。
contenteditable 属性を体験する
文字で説明してもピンとこないかもしれませんので、実際にコードを書いてどのように contenteditable 属性 が動作するか確認してみましょう。
まず、以下のように index.html を作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Editable Text Submit</title>
<style>
body {
font-family: sans-serif;
padding: 20px;
}
.editor {
border: 1px solid #ccc;
padding: 10px;
min-height: 120px;
}
</style>
</head>
<body>
<h1>メモ投稿</h1>
<div id="editor" class="editor" contenteditable="true">
ここにメモを書いてください
</div>
<button id="submit">送信</button>
<script src="script.js"></script>
</body>
</html>
上記のファイルが保存できたら、LiveServer 等を使用して、Web ブラウザで index.html を表示してみましょう。
表示してみたら、「ここにメモを書いてください」という場所を選択して、テキストを入力してみましょう。実際に、文字を書くことが可能です。
さて、ここで確認したいのが、form を使わなくても編集エリアを作ることが可能だ ということです。
HTML ファイルのコードをご覧のとおり form や input、textarea が存在しなくても、contenteditable 属性 を指定するだけで、その指定した要素に対してテキストを入力し、また編集することが可能になります。
🧤 入力した文字を取得してみる
それでは、次に contenteditable 属性 を指定した div 要素で記入された内容を取得してみましょう。
以下のように script.js ファイルを作成し保存してください。
const editor = document.getElementById("editor");
const submitBtn = document.getElementById("submit");
submitBtn.addEventListener("click", () => {
const content = editor.innerHTML;
console.log(content);
});
保存したら、ブラウザを更新して上記の JS ファイルが読み込まれるようにしましょう。
そうしたら、再度 div 要素のエリアでテキストを編集してみた後、送信ボタンを押してブラウザのコンソール画面を確認してください。
するとどうでしょう！div 要素で入力したテキスト内容がコンソール画面で確認することができます。
更に詳しく見てみると、コンソールに表示されている内容は、HTML として表現された、現在の編集状態そのものの内容 になっていることも分かります。
このコードで大切なのは、input.value の代わりに innerHTML を使用して入力したテキスト情報を取得しているところです。
今回は input 要素を使用していないので、input.value を使用して div 要素の値を取得することはできません。
その代わりに innerHTML を使って div 要素に記入された内容を 「装飾込みのテキスト」 として取得しています。
📝 テキストをローカルストレージに保存する
次に、取得した文字列をローカルストレージに保存してみましょう。
ちなみに 「ローカルストレージって何ぞ？」 という方に、以下のようなに簡単に説明文を書いておきます！👍
・ブラウザにデータを保存できる
・ページをリロードしても消えない
・サーバー不要
それでは、script.js を以下のように変更して保存してください。
const editor = document.getElementById("editor");
const submitBtn = document.getElementById("submit");
submitBtn.addEventListener("click", () => {
const content = editor.innerHTML;
console.log(content);
+
+ localStorage.setItem("savedContent", content);
+ alert("ブラウザに保存しました");
});
ここでは、取得したテキストデータをローカルストレージに保存しています。
🌱 保存した内容を復元する
最後に、ローカルストレージに保存したデータをブラウザで更新しても復元できるようにしてみましょう。ページ読み込み時に保存データが反映されるように以下のように script.js ファイルを更新してください。
const editor = document.getElementById("editor");
const submitBtn = document.getElementById("submit");
submitBtn.addEventListener("click", () => {
const content = editor.innerHTML;
console.log(content);
localStorage.setItem("savedContent", content);
alert("ブラウザに保存しました");
});
+ window.addEventListener("DOMContentLoaded", () => {
+ const saved = localStorage.getItem("savedContent");
+
+ if (saved) {
+ editor.innerHTML = saved;
+ }
+ });
ブラウザを更新して、JS ファイルを適用して、テキストを入力し保存後、もう一度ブラウザを更新してみましょう！
すると、ブラウザを更新前の情報を、ブラウザ更新後もそのまま利用することができます！