javascript - Stripping styles from TinyMCE copy+paste? - Stack Overflow

admin管理员组

文章数量:1341878

is there a way to strip specific tags from ing 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!

is there a way to strip specific tags from ing 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!

• javascript
• css
• tinymce
• wysiwyg

Share Follow asked Oct 24, 2011 at 16:02 WalkerWalker 135k2929 gold badges6969 silver badges9797 bronze badges 1

• 1 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. <img>). – Márton Tamás Commented Feb 5, 2021 at 19:44

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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.

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

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

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).

1. Listen to the browser's native paste event.
2. Parse the clipboard's text/html string with DOMParser.
3. Make changes in the generated DOM tree.
4. Set the textbox content to the stripped content.
5. 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 ()
})

本文标签： javascriptStripping styles from TinyMCE copypasteStack Overflow