contenteditable可編輯div插入圖片
阿新 • • 發佈：2018-12-21
可編輯div也就是常說的富文字編輯器，自己手動做一個富文字編輯器。需要設定div的可編輯屬性contenteditable="true"
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>富文字上傳圖片</title> <style> #editer{ border: 1px solid #ccc; width: 400px; height: 200px; margin-bottom: 30px; } #editer img{ /* 需要圖片換行的話，可以設定display:block; */ display: block; max-width: 100px; } </style> </head> <body> <div id="editer" contenteditable="true"> 123456123456 </div> <input type="file" name="file" id="uploadFile" onchange="uploadFile(event)"/> </body> <script type="text/javascript" language="javascript"> var editer = document.getElementById('editer'); function uploadFile(e){ let file = e.target.files[0]; //需要上傳到後臺的圖片 //上傳後臺，此處省略。。。。。。。。。。。 let filePath = 'http://qiniu.jnwtv.com/LC20180417174434604455636.jpg'; //filePath為後臺返回的圖片地址 editer.focus(); document.execCommand('InsertImage', false, filePath); } </script> </html>
更多富文字操作請參考官方文件：