Custom Paste Handler

by staxeddd

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rich Text Editor</title>
</head>
<body>
    <div class="editor" contenteditable="true"></div>
</body>
</html>

CSS

.editor {
  border: 1px solid #ccc;
  padding: 10px;
  min-height: 100px;
}

JavaScript

var editor = document.querySelector('.editor');

        editor.addEventListener("paste", function(e) {
            e.preventDefault();

            var text = (e.clipboardData || window.clipboardData).getData('text/plain');
            var selection = window.getSelection();
            if (!selection.rangeCount) return;

            var range = selection.getRangeAt(0);
            range.deleteContents();
            range.insertNode(document.createTextNode(text));
        });