質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

3431閲覧

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

mihodesu

総合スコア16

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/10/14 08:10

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

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

理想

html

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

方法1

JavaScript

vue

1<template> 2 <div class="form-input" id="tag" @keypress.enter="inputEnter" contentEditable="true"></div> 3</template> 4 5<script> 6 export default { 7 methods: { 8// 方法1 親要素から子要素を取得して、削除する 9 inputEnter () { 10 let ele = document.getElementById('tag') 11 console.log(ele.childNodes[1]) 12 // ログを見るとNodeLisrで`div`が存在するものの、`undefined`となり取得できない 13 } 14 } 15 } 16</script>

結果

html

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

方法2

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

JavaScript

vue

1tabEnter () { 2 let ele = document.getElementById('tag') 3 document.execCommand('formatBlock', false, 'div') 4 let create_ele = document.createElement('div') 5 create_ele.appendChild(ele.firstChild) 6 ele.insertBefore(create_ele, ele.firstChild) 7}

結果

html

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

javascript

1<script> 2window.addEventListener('DOMContentLoaded', ()=>{ 3 const observer = new MutationObserver((mutations) => { 4 mutations.forEach((mutation) => { 5 [].forEach.call(document.querySelectorAll('#hoge div:not(.fuga)'),x=>{ 6 x.classList.add('fuga'); 7 }); 8 }); 9 }); 10 const config = {childList: true}; 11 observer.observe(document.querySelector('#hoge'), config); 12}); 13</script> 14<div id="hoge" contenteditable>hoge</div>

投稿2019/10/15 01:13

編集2019/10/15 01:23
yambejp

総合スコア115275

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mihodesu

2019/10/15 12:50

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問