JSFiddle - React, Tailwind, and code Playground

by tuzcwish

HTML

<div class="textarea-container" id="textarea" contenteditable="true">
</div>
<button id="insertImage">插入图片</button>
<button id="insertEmoji">插入表情</button>
<div id="emoji">&#x1F600;</div>

CSS

.textarea-container {
  width: 500px;
  height: 200px;
  border: 1px solid #f1f1f1;
  text-align: left;
}

#emoji {
  display: none;
}

JavaScript

function insertImage () {
	document.getElementById('textarea').focus()
  const imgDom = `<img src="http://www.rologo.com/images/uploads/2015/09/G-symbol.png" style="max-width:200px; max-height: 100px;display:block;"></img>`
  document.execCommand('insertHtml', 'false', imgDom)
  let range = window.getSelection()
  range.selectAllChildren(document.getElementById('textarea'))
  range.collapseToEnd()
}
function insertEmoji () {
	document.getElementById('textarea').focus()
  let content = document.getElementById('emoji').innerHTML
  document.execCommand('insertHTML', 'false', content)
}
document.getElementById('insertImage').addEventListener('click', insertImage)
document.getElementById('insertEmoji').addEventListener('click', insertEmoji)