divタグをカスタマイズしてWYSIWYGエディタっぽいものを自作する

概要

divタグをカスタマイズしてWYSIWYGエディタっぽいものを作りたい。
WYSIWYGエディタっぽいものということで、WEBサイトの装飾ごとコピペができるようになるまで作ります。

環境

• html
• scss
• javascript

実装

まずは見た目をテキストエリアに近づける

html

<div class="textarea"></div>

scss

.textarea {
    width: 200px;
    height: 100px;
    border: solid 1px #a9a9a9;
    padding: 3px;
    overflow: auto;
}

入力を可能にする

devタグにcontenteditable="true"を指定すると入力できるようなります

html

<div
    class="textarea"
    contenteditable="true"
></div>

scss

.textarea {
    width: 200px;
    height: 100px;
    border: solid 1px #a9a9a9;
    padding: 3px;
    overflow: auto;
}

これで、他のページからhtmlタグやスタイルごとコピペできるようになります。

placeholderを作る

html部分

divタグにdata属性を付けて実装します

• data-placeholderactiveでplaceholderのon/offできるようにする。デフォルトはon(true)
• data-placeholderでplaceholderとして表示するテキスト指定してする

html

<div
    class="textarea"
    contenteditable="true"
    data-placeholderactive="true"
    data-placeholder="ここに文章を入力してください"
></div>

CSS部分

data-placeholderactiveがtrueの時だけ、placeholderを表示するように設定します

scss

.textarea {
  width: 200px;
  height: 100px;
  border: solid 1px #a9a9a9;
  padding: 3px;
  overflow: auto;
  &[data-placeholderactive="true"]::before {
    content: attr(data-placeholder);
    opacity: .6;
  }
}

javascript部分

• textareaクラスに対してイベントを設定
• 文字が入力されていたら、placeholderactiveをon(true)、そうでない場合はoff(false)とする

javascript

var ele = document.getElementsByClassName("textarea")[0];
ele.addEventListener('input', function() {
    if ( ele.textContent.length === 0 ) {
        ele.setAttribute('data-placeholderactive','true');
    } else {
        ele.setAttribute('data-placeholderactive','false');
    }
});

(仮)完成

こんな感じになります。

See the Pen make wysiwyg editor div @v1 by ishi720 (@ishi720) on CodePen.

バグ修正

これで完成。と言いたいところですがバグがあります。
ということで、修正していきます。(コードは差分のみ記述します)

未入力の状態で改行するとplaceholderが残る問題

• (問題) Ender & backspaceすると想定した動きをしていない
• (原因) ele.textContent.lengthで改行がカウントされていない
• (対策) 文字数が0・改行コードが1の時は空にする必要がある

ということで修正(ちょっと雑ですが...)

javascript

var ele = document.getElementsByClassName("textarea")[0];
ele.addEventListener('input', function() {
-   if ( ele.textContent.length === 0 ) {
+   if ( ele.textContent.length === 0 && ( ele.innerText.match(/\r\n|\n/g) === null || ele.innerText.match(/\r\n|\n/g).length === 1 ) ) {
+       ele.textContent = "";//強制的に中身を空にする
        ele.setAttribute('data-placeholderactive','true');
    } else {
        ele.setAttribute('data-placeholderactive','false');
    }
});

完成したもの

まだバグがあるかもですが、以下が完成物となります。

See the Pen make wysiwyg editor @v2 by ishi720 (@ishi720) on CodePen.

終わり