HTML contenteditable 改行時に挿入されるdivを書き換えたい

Question

改行時に自動で子要素に挿入されるdivにclass="item"を付けたく、いくつか方法を試したのですが、自動で挿入されるdivが認識されなかったり、書き換えられなかったりと悩んでいます。

どのように行えば、理想の形になるかご教授いただけると助かります。
Vue.jsおよびNuxt.js環境で行なっています。

理想

<div class="form-input" contentEditable>
  <div class="item"></div>
</div>

方法1

JavaScript

<template>
  <div class="form-input" id="tag" @keypress.enter="inputEnter" contentEditable="true"></div>
</template>

<script>
  export default {
    methods: {
// 方法1 親要素から子要素を取得して、削除する
      inputEnter () {
        let ele = document.getElementById('tag')
        console.log(ele.childNodes[1])
        // ログを見るとNodeLisrで`div`が存在するものの、`undefined`となり取得できない
      }
    }
  }
</script>

結果

<div class="form-input" contentEditable>
  <div class="item"></div>
  <div><br></div> <!--これを消したいが、認識されない-->
</div>

方法2

http://sainu.hatenablog.jp/entry/contenteditable-create-custom-htmltag
上記の記事を参考にdocument.execCommand('formatBlock', false, 'div')を利用して書き換える方法も試してみましたが、
うまく書き換えられません。

JavaScript

tabEnter () {
        let ele = document.getElementById('tag')
        document.execCommand('formatBlock', false, 'div')
        let create_ele = document.createElement('div')
        create_ele.appendChild(ele.firstChild)
        ele.insertBefore(create_ele, ele.firstChild)
}

結果

<div class="form-input" contentEditable>
  <div>
    <div><br></div> <!-- 削除されず... -->
    <div>テキスト入力した後に改行してみた</div>
  </div>
</div>

Answer 1

contenteditableは実装がブラウザによってバラバラでは？
利用にはコストが高いので別の手段を検討されたほうがよいと思います
それでもどうしてもやりたいならこんな感じ

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      [].forEach.call(document.querySelectorAll('#hoge div:not(.fuga)'),x=>{
        x.classList.add('fuga');
      });
    });
  });
  const config = {childList: true};
  observer.observe(document.querySelector('#hoge'), config);
});
</script>
<div id="hoge" contenteditable>hoge</div>

Comments

[mihodesu]

ご回答ありがとうございます。
そうですね、確かに手間かかりそうです。
書いていただいたJSを試してみて、他の策も考えたいと思います。
ありがとうございました。