JSFiddle - React, Tailwind, and code Playground

by ambar

HTML

<div class="content" contenteditable="true">paste here </div>

CSS

.content {
    height: 300px;
    width: 600px;
    border: 3px dashed #ccc;
}

JavaScript

$('.content').on('paste', function(e) {
  handlePaste(e.originalEvent);
});

function handlePaste(e) {
  var text, textType = 'text/plain';
  var clipboard = e.clipboardData ;
  if (clipboard) { // w3c(webkit,opera...)
    if (clipboard.types && clipboard.types.indexOf(textType) > -1) {
      e.preventDefault();
      text = clipboard.getData(textType);
      replaceText(text);
    }
  }
}

// 所选内容替换成指定内容
function replaceText(text) {
  var selection = window.getSelection();
  var range = selection.getRangeAt(0);
  var textNode = document.createTextNode(text);
  range.insertNode(textNode);
}