Stripping styles from TinyMCE copy+paste?

Question

is there a way to strip specific tags from coming into tiny MCE through a copy+paste from an external source (e.g. Word)? I'd like to prevent font-family and image tags from being copy+pasted over, but have no problem with font-size etc.

Thank you!

Your question uses a bit confusing wording. If I understand it right, you want to remove specific *inline styles* (eg. `font-family`) and *tags* (eg. ``). — Márton Tamás, Feb 05 '21 at 19:44

score 3 · Accepted Answer · edited Mar 14 '17 at 02:27

3

You can't really stop someone from pasting something, so I believe your best bet would be to filter out the unwanted tags by calling a function on form submit, or onchange of the tiny MCE textarea. Then you could use some regular expression replacement to get rid of the unwanted tags.

EDIT: Actually there is a simple way. check the TinyMCE documentation.

edited Mar 14 '17 at 02:27

Jo.

778
1
12
17

answered Oct 24 '11 at 16:11

Brian Glaz

15,468
4
37
55

I understand that, I want to allow copy paste I just want to strip certain elements of the copy paste (certain tags in the span that comes from word or a website). I was hoping TinyMCE might support that in a simple way. – Walker Oct 24 '11 at 16:22
Thanks! Sorry I couldn't find that, scanned the documentation but must have missed it. – Walker Oct 24 '11 at 16:56
`invalid_elements`, `valid_styles` and `invalid_styles` seem relevant, but doesn't seem to work on pasting :/ – Márton Tamás Feb 05 '21 at 19:40

score 1 · Answer 2 · edited Sep 18 '15 at 13:04

1

I don't know how useful this will be, but you might want to take a look at this jQuery plugin which allows you to filter tags and attributed from the text your are pasting.

FilteredPaste.js - A jQuery Plugin To Filter & Clean Pasted Input

edited Sep 18 '15 at 13:04

Taylan

3,045
3
28
38

answered Jan 31 '13 at 12:29

Hirvesh

7,636
15
59
72

score 1 · Answer 3 · edited May 23 '17 at 12:02

1

Here is the link to a similar SO question with a detailed description of howto strip out unwanted tags: TinyMCE Paste As Plain Text

edited May 23 '17 at 12:02

Community

1
1

answered Oct 25 '11 at 07:27

Thariama

50,002
13
138
166

score 0 · Answer 4 · answered Feb 05 '21 at 19:39

Although "You can't really stop someone from pasting something" indeed, you can transform what your web app inserts into your TinyMCE textbox (or any other input).

Listen to the browser's native paste event.
Parse the clipboard's text/html string with DOMParser.
Make changes in the generated DOM tree.
Set the textbox content to the stripped content.
Prevent the paste default action.

Check this out:

editor.on ('paste', event => {

  // Get clipboard's original HTML string
  const clipboard = event.clipboardData
  const originalHtml = clipboard.getData ('text/html')

  // Parse HTML string into a DOMElement
  const parser = new DOMParser
  const doc = parser.parseFromString (originalHtml, 'text/html')

  // Modify DOM tree
  const elems = doc.body.querySelectorAll ('*')
  elems.forEach (elem => {
    elem.style.fontFamily = ''
    // Do other modifications here...
  })

  // Set textbox content to modified HTML
  editor.setContent (doc.body.innerHTML)

  // Prevent pasting original content
  event.preventDefault ()
})

Stripping styles from TinyMCE copy+paste?

4 Answers4