当前位置：文江博客话题详情

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

发布于 2024-12-11 18:33:12 字数 90 浏览 0 评论 0原文

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

谢谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

猫性小仙女 2024-12-18 18:33:12

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

编辑：实际上有一个简单的方法。检查 TinyMCE 文档。

回复收藏 0 原文

孤者何惧 2024-12-18 18:33:12

以下是类似 SO 问题的链接，其中详细描述了如何删除不需要的标签： TinyMCE Paste作为纯文本

回复收藏 0 原文

爱她像谁 2024-12-18 18:33:12

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

FilteredPaste.js - 用于过滤和过滤的 jQuery 插件清理粘贴的输入

回复收藏 0 原文

不喜欢何必死缠烂打 2024-12-18 18:33:12

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

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

看看这个：

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

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

回复收藏 0 原文

~没有更多了~