从TinyMCE复制+粘贴中剥离样式?

时间:2011-10-24 16:02:02

标签: javascript css tinymce wysiwyg

有没有办法通过外部源(例如Word)的复制+粘贴来剥离特定标签进入微小的MCE?我想阻止字体系列和图像标签被复制+粘贴,但字体大小等没有问题。

谢谢!

4 个答案:

答案 0 :(得分:4)

你无法阻止某人粘贴某些东西,所以我相信你最好的办法是通过调用表单提交上的函数或者更换微小的MCE textarea来过滤掉不需要的标签。然后你可以使用一些正则表达式替换来摆脱不需要的标签。

编辑:实际上有一种简单的方法。检查TinyMCE documentation

答案 1 :(得分:1)

以下是类似SO问题的链接,其中详细说明了如何删除不需要的标记:TinyMCE Paste As Plain Text

答案 2 :(得分:1)

我不知道这会有多大用处,但你可能想看看这个jQuery插件,它允许你过滤标签并从你粘贴的文本中归结。

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

答案 3 :(得分:0)

虽然“您确实无法阻止某人粘贴某些内容”,但您可以转换您的网络应用程序插入到您的 TinyMCE 文本框(或任何其他输入)中的内容。

  1. 收听浏览器的原生 paste 事件。
  2. 使用 DOMParser 解析剪贴板的 text/html 字符串。
  3. 在生成的 DOM 树中进行更改。
  4. 将文本框内容设置为剥离的内容。
  5. 阻止 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 ()
})