
掲題の通り、contenteditableなdivの中に画像を挿入したく、調べると
execCommand('insertImage', false, url)というものを使ってできそうだったので、エラーになってしまい、その後調べてもどうすればいいのかわかりません。
以下に簡略化したコードとエラーメッセージを載せますので、原因・対応策を教えて下さい。
HTML
1<div class='body-text' contenteditable=true></div> 2 3<button onclick={putImage}>画像セット</button>
Javascript
1putImage(e) { 2 document.querySelector('.body-text').execCommand('insertImage', false, 'm.jpg') 3}
エラーメッセージ
Uncaught TypeError: tar.execCommand is not a function
追記
上記はいただいた回答(セレクタを使わずに「document.execCommand('insertImage', false, 'm.jpg')」を使用する)解決したのですが、本来実施したかった以下のものがどうやってもうまくいきません。
実際に自分がブラウザから選択した画像だけでなく、もともとファイル名を指定したものまで表示されない状況です。
こちらの原因もわかりますでしょうか?
HTML
1<div class='body-text' contenteditable=true></div> 2 3<div class='select-image'> 4 <label> 5 Select Image 6 <input type='file' name='image' onchange={ inputImage } hidden> 7 </label> 8</div>
Javascript
1this.inputImage = (e) => { 2 var fileData = e.target.files[0] 3 var fileType = fileData.type 4 5 var reader = new FileReader() 6 7 reader.onload = () => { 8 var url = reader.result 9 console.log('check')//checkは出力される 10 document.execCommand('insertImage', false, 'm.jpg')//m.jpgはどこにも挿入されず 11 document.execCommand('insertImage', false, url)//選択した画像もどこにも挿入されず 12 } 13 reader.readAsDataURL(fileData) 14}

回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/09/27 05:32