TinyMCE 编辑器粘贴内容后自动清除格式
2024-12-23 68 0
在 TinyMCE 中，可以通过配置粘贴选项实现自动清除粘贴内容的格式。例如，设置粘贴时只保留纯文本内容，忽略粘贴的样式和 HTML 元素。
方法 1: 使用 paste_as_text 配置
paste_as_text 是 TinyMCE 提供的一个选项，用于将粘贴的内容自动转换为纯文本。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TinyMCE Paste as Text</title>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
</head>
<body>
<textarea id="editor"></textarea>
<script>
tinymce.init({
selector: '#editor',
plugins: 'paste', // 确保启用了粘贴插件
paste_as_text: true, // 启用纯文本粘贴
toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | removeformat', // 工具栏
menubar: false // 可选，隐藏菜单栏
});
</script>
</body>
</html>
设置 paste_as_text: true 后，粘贴的内容会以纯文本的形式插入，所有样式和 HTML 标签都被移除。实测下来赋值过来的富文本Html会保持原来的段落结构，只剩下br和p标签。
方法 2: 使用 paste_postprocess 回调
如果需要更灵活的控制，例如在清除格式时保留部分内容，可以使用 paste_postprocess 回调函数。
示例代码：
<script>
tinymce.init({
selector: '#editor',
plugins: 'paste',
paste_postprocess: function(plugin, args) {
// 将粘贴的内容转换为纯文本
args.node.innerHTML = args.node.textContent;
},
toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | removeformat',
menubar: false
});
</script>
粘贴内容时，通过 paste_postprocess 钩子将内容转换为纯文本。上面的示例代码会将所有内容作为文本放在一个p标签段落里，破坏了原来文章的结构，不推荐直接使用。
方法 3: 自定义粘贴内容处理
通过 paste_preprocess 回调函数，自定义粘贴前的内容处理。
示例代码：
<script>
tinymce.init({
selector: '#editor',
plugins: 'paste',
paste_preprocess: function(plugin, args) {
// 手动处理粘贴内容
console.log('Original content:', args.content);
args.content = args.content.replace(/<[^>]*>?/g, ''); // 移除所有 HTML 标签
},
toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | removeformat',
menubar: false
});
</script>
粘贴内容时，所有 HTML 标签都会被移除，只保留纯文本。这个代码示例里使用正则去除了所有Html标签，这个方法和使用paste_postprocess方法类似，可以自定义一些规则。
总结
如果只需要简单的纯文本粘贴，设置 paste_as_text: true 是最简单的解决方案。
高度自定义场景下，结合 paste_preprocess 和 paste_postprocess 可完全控制粘贴内容。
根据你的具体需求选择合适的实现方式即可！
您可能感兴趣：
阿里云 云服务器 99元1年 2核2G 3M固定带宽 续费与新购同价
领取 通义灵码 免费使用资格 兼容 Visual Studio Code、Visual Studio、JetBrains IDEs 等主流编程工具， 为你提供高效、流畅、舒心的智能编码体验！