JSFiddle - React, Tailwind, and code Playground

by ambar

HTML

<div  class ="content" contenteditable=true style='height:200px;width=200px;background:#cccccc'> </div>

JavaScript

$(".content").on('paste', function(e) {
		var self = this;
		handler_clipboardData($(this),e);
	});

function handler_clipboardData(obj,e){
	var text, textType = 'text/plain';
	var clipboard = e.originalEvent.clipboardData ;
	var div = document.createElement('div');
    var t = document.createTextNode("text");
	if (clipboard) { // w3c(webkit,opera...)
		if (clipboard.types){
			e.preventDefault();
			text = clipboard.getData(textType);
			replaceText(text);
	   }
    }// 省略
}

// 所选内容替换成指定内容
function replaceText(text) {
    alert(text);
    var selectedText = window.getSelection();
    var div = document.createElement('div');
    var t = document.createTextNode(text);
    div.appendChild(t);
    console.log(div);
    selectedText.getRangeAt(0).surroundContents(div);
    selectedText.removeAllRanges();
}