从 TinyMCE 复制+粘贴中剥离样式？答案

【问题标题】：Stripping styles from TinyMCE copy+paste?从 TinyMCE 复制+粘贴中剥离样式？
【发布时间】：2011-12-14 06:38:37
【问题描述】：

有没有办法通过从外部来源（例如 Word）复制+粘贴来去除特定标签进入微型 MCE？我想防止字体系列和图像标签被复制+粘贴，但字体大小等没有问题。

谢谢！

【问题讨论】：

您的问题使用了一些令人困惑的措辞。如果我理解正确，您想删除特定的内联样式（例如font-family）和标签（例如<img>）。

标签： javascript css tinymce wysiwyg

【解决方案1】：

您无法真正阻止某人粘贴某些内容，因此我相信您最好的选择是通过在表单提交上调用函数或对微小的 MCE 文本区域进行 onchange 来过滤掉不需要的标签。然后你可以使用一些正则表达式替换来摆脱不需要的标签。

编辑：其实有一个简单的方法。检查TinyMCE documentation。

【讨论】：

我明白，我想允许复制粘贴我只是想去除复制粘贴的某些元素（来自单词或网站的跨度中的某些标签）。我希望 TinyMCE 能以一种简单的方式支持它。
谢谢！抱歉，我找不到，扫描了文档，但一定错过了。
invalid_elements、valid_styles 和 invalid_styles 似乎相关，但似乎不适用于粘贴：/

【解决方案2】：

这是一个类似 SO 问题的链接，其中详细描述了如何去除不需要的标签：TinyMCE Paste As Plain Text

【讨论】：

【解决方案3】：

我不知道这会有多大用处，但您可能想看看这个 jQuery 插件，它允许您从粘贴的文本中过滤标签和属性。

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

【讨论】：

【解决方案4】：

虽然“你无法真正阻止某人粘贴某些内容”，但您可以转换您的网络应用插入到 TinyMCE 文本框（或任何其他输入）中的内容。

监听浏览器原生的paste事件。
用DOMParser解析剪贴板的text/html字符串。
在生成的 DOM 树中进行更改。
将文本框内容设置为剥离的内容。
阻止paste 默认操作。

看看这个：

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 ()
})

【讨论】：