content-editable-html-stripper

Handler to remove HTML from text pasted into a contenteditable div element on paste

Usage no npm install needed!

<script type="module">
  import contentEditableHtmlStripper from 'https://cdn.skypack.dev/content-editable-html-stripper';
</script>

README

content-editable-html-stripper

Build Status npm Version

This package contains a convenient function to remove HTML-like entities from a string on paste events to contenteditable elements. This uses clipboardData. Although clipboardData is an exprimental technology, it is widely supported by modern browsers.

Installation

npm install content-editable-html-stripper --save

Usage

To strip HTML-like entites from content pasted into a contenteditable container,

import { handlePaste } from 'content-editable-html-stripper'

API

handlePaste(event)

Insert string into focused contenteditable element with HTML-like entities removed from pasted string.

Vanilla

<blockquote contenteditable="true">
  ???
</blockquote>

document.getElementsByTagName('blockquote')[0].addEventListener('paste', handlePaste)

React

import React from 'react'
import { handlePaste } from 'content-editable-html-stripper'

function BlockQuote (props) {
  const { onPaste } = props

  return (
    <blockquote
      contenteditable='true'
      onPaste={handlePaste}
    />
  )
}

export default BlockQuote

Yeah, it's magic 💫