将粘贴内容复制到 TinyMCE 输入会导致 HTML 臃肿

     2023-03-17     155

关键词:

【中文标题】将粘贴内容复制到 TinyMCE 输入会导致 HTML 臃肿【英文标题】:Copy&Paste content into TinyMCE input results in bloated HTML 【发布时间】:2011-07-23 14:14:30 【问题描述】:

我将 TinyMCE 用于各种项目。我遇到的问题是 ATM 是很多用户复制并粘贴来自 Word 或 OpenOffice 等源的内容到 TinyMCE 输入中。这通常会导致代码臃肿(例如,像 <span lang="EN-GB"> 这样的东西被 OpenOffice 接管了)。 TinyMCE 的清理似乎并没有删除这些标签。有没有办法在文本粘贴到 TinyMCE 输入区域之前删除所有格式 ?还是有其他方法可以防止这种臃肿的代码,例如通过 PHP 过滤服务器端?

【问题讨论】:

【参考方案1】:

我知道这是一个 opd 问题,但为了其他可能正在寻找这个答案的人的利益(就像我一样!),TinyMCE 现在包括控制粘贴到文本框中的内容的能力。

在初始化调用中,添加“粘贴”插件,然后设置您需要的任何选项,例如

tinyMCE.init(
    ...
    plugins: "paste",
    paste_auto_cleanup_on_paste : true,
    paste_remove_styles: true,
    paste_remove_styles_if_webkit: true,
    paste_strip_class_attributes: "all",
    paste_remove_spans : true,
    ...
);

您可以在tinyMCE wiki中看到所有选项

【讨论】:

【参考方案2】:

我使用以下 c 函数 on_preprocess 删除所有标签:

strip_tags = function (str, allowed_tags) 
    var key = '', allowed = false;
    var matches = [];    var allowed_array = [];
    var allowed_tag = '';
    var i = 0;
    var k = '';
    var html = ''; 
    var replacer = function (search, replace, str) 
        return str.split(search).join(replace);
    ;
     // Build allowes tags associative array
    if (allowed_tags) 
        allowed_array = allowed_tags.match(/([a-zA-Z0-9]+)/gi);
    
     str += '';

    // Match tags
    matches = str.match(/(<\/?[\S][^>]*>)/gi);
     // Go through all HTML tags
    for (key in matches) 
        if (isNaN(key)) 
            // IE7 Hack
            continue;        

        // Save HTML tag
        html = matches[key].toString();
         // Is tag not in allowed list? Remove from str!
        allowed = false;

        // Go through all allowed tags
        for (k in allowed_array)             // Init
            allowed_tag = allowed_array[k];
            i = -1;

            if (i != 0)  i = html.toLowerCase().indexOf('<'+allowed_tag+'>');           
            if (i != 0)  i = html.toLowerCase().indexOf('<'+allowed_tag+' ');
            if (i != 0)  i = html.toLowerCase().indexOf('</'+allowed_tag)   ;

            // Determine
            if (i == 0)                 allowed = true;
                break;
            
        
         if (!allowed) 
            str = replacer(html, "", str); // Custom replace. No regexing
        
    

     return str;
;

在我放置的 tinymce 初始化中

paste_preprocess : function(pl, o) 

// remove Clipboard header on MAC
var pos_sel = o.content.search("EndSelection:");
var pos_fra = o.content.search("EndFragment:");
var mac_header_found = false;

if (o.content.search("Version:") == 0 && pos_sel < 135 && pos_sel > 120)
    o.content = o.content.substring(pos_sel+23);
    mac_header_found = true;

else if (o.content.search("Version:") == 0 && pos_fra < 80 && pos_fra > 75)
    o.content = o.content.substring(pos_fra+23);
    mac_header_found = true;


// Copy from Word oder OpenOffice (MAC) - remove header
if (o.wordContent || mac_header_found) 
    // first style tag + content to be removed
    var pos_start_style = o.content.search('<style');
    var pos_end_style = o.content.search('</style>');
    if (pos_start_style > 0 && pos_end_style > pos_start_style) 
        o.content = o.content.substring(0, pos_start_style).concat(o.content.substring(pos_end_style + 8));
    
    // complete Worddokument gets pasted
    else 
        var pos_start_p = o.content.search('<p');
        if (pos_start_p) o.content = o.content.substring(pos_start_p);
    


    o.content = ir.im.strip_tags( o.content, '' );

// NO-Break Zero-width space if empty
if (o.content == '') 
    o.content = '&#65279;';
   
,

【讨论】:

看起来不错。必须尝试一下。所以基本上,如果我做对了,我们定义了一个过滤所有非白名单 HTML 元素的函数,该函数通过 tinyMCE init 调用。还是我做错了什么? 它不是通过 init 调用的,而是使用 init 定义粘贴时调用的函数(预处理)

使用在线编辑器tinymce,将word中的图片粘贴进来时,图片却无法显示!

把word中的内容复制后,粘贴到tinyce编辑器中时,word中的图片却无法显示出来。一些特殊符号也会变成乱码,如:格式-项目符号和编号-项目符号。另外在将粘贴后的源码进行处理后(我的方法是将里面的imagedata替换成img,这一... 查看详情

word里头的图片如何直接复制到tinymce编辑器

Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能。但是无法处理多张图片。而且转换成BASE64后是... 查看详情

tinymce - 如何禁用智能粘贴

】tinymce-如何禁用智能粘贴【英文标题】:tinymce-howtodisablesmartpaste【发布时间】:2012-12-2607:04:49【问题描述】:当我在tinymce编辑器中粘贴某些内容并将其保存到db时,它会自动保存与该副本相关的所有样式。我只想保留html标签而... 查看详情

为啥复制后不能粘贴

参考技术A问题一:复制后不能粘贴怎么解决、复制后无法粘贴文件2、任务栏不显示已打开的程序3、可以上网,但IE无法打开新窗口,电脑重启后问题依旧。原因:系统的RPC服务被阻止解决办法:1、找台正常的电脑,开始→运行... 查看详情

复制和粘贴的按钮[重复]

】复制和粘贴的按钮[重复]【英文标题】:ButtonThatCopyAndPastes[duplicate]【发布时间】:2017-09-2923:39:01【问题描述】:我想制作一个按钮,因此当您单击它时,它会使用c#将某些内容复制到剪贴板,例如:我单击按钮,然后按ctrl+v并... 查看详情

实现复制文本到粘贴板(代码片段)

...项目中经常会遇到点击按钮复制订单号、订单id等内容到粘贴板中的需求。可是在网页上我们通常都是用Ctrl+c或右击复制的,别担心,js也是有复制命令的,那就是document.execCommand(‘copy‘); 这个命令会将选中的内容复制到粘... 查看详情

tinymce编辑器复制粘贴图片上传

tinymce是很优秀的一款富文本编辑器,可以去官网下载。https://www.tiny.cloud这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用。http://blog.ncmem.com/wordpress/2019/08/07/umeditor%E7%B2%98%E8%B4%B4word%E5%9B%BE%E7%89%87/以v... 查看详情

vim剪切复制

...ttp://news.replays.net//news/webdown在想要获取寄存器中内容将它粘贴到某处的时候,一般在命令模式下先输入寄存器号(如”0),然后输入粘贴命令(p),举例来说如果我要将“0中内容粘贴到光标后面,在命令模式下输入... 查看详情

vim剪切复制

...ttp://news.replays.net//news/webdown在想要获取寄存器中内容将它粘贴到某处的时候,一般在命令模式下先输入寄存器号(如”0),然后输入粘贴命令(p),举例来说如果我要将“0中内容粘贴到光标后面,在命令模式下输入... 查看详情

用于将行复制并粘贴到另一个工作表而不将其粘贴到页面数英里的宏(代码片段)

...我的工作表中的一个按钮驱动,我可以复制行,并将它们粘贴到另一个工作表的下一个可用行上,当某个列满足某些条件时。我遇到的问题是,当宏运行时,它会复制并粘贴到另一个电子表格上,但是,即使在目标表上平均只有... 查看详情

如何将vim里的内容复制粘贴到vim之外的地方

参考技术A1.鼠标选择,在其他窗口中键就粘贴了。2.鼠标选择,gvim下菜单选择复制,,,3.看vim的cheatsheet 查看详情

制表符分隔文本的复制粘贴会导致 Excel 中出现奇怪的格式?

】制表符分隔文本的复制粘贴会导致Excel中出现奇怪的格式?【英文标题】:copypasteoftabdelimitedtextresultsinstrangeformattinginExcel?【发布时间】:2014-12-2918:07:38【问题描述】:我的源文件是一个制表符分隔的文本文件(*.txt)。我正在从*.... 查看详情

processon思维导图的跨文件复制

...照手动输入,只需将文件节点里面的内容复制一下,然后粘贴到需要的文件内就能实现,大大节省了工作时间和成本。除了应用到自己文件的转移复制之外,还可以应用到团队之间的协作。一般在一个小团队中每个人都会负责到... 查看详情

WordPress TinyMCE 不提交内容

】WordPressTinyMCE不提交内容【英文标题】:WordPressTinyMCENotSubmittingContent【发布时间】:2011-08-0504:59:16【问题描述】:我为WordPress3.1编写了一个管理插件。该插件有一个TinyMCE文本区域。我正在使用jQueryForm将表单数据提交到处理页面... 查看详情

将数据从一个工作簿复制并粘贴到另一个工作簿,导致随机单元格获取数据/空行而不会粘贴数据(代码片段)

...ATE我的问题的一半现在已经解决,但我仍然遇到问题。我粘贴到新工作簿的大部分数据都运行良好。如果多次按下该按钮,数据将粘贴到下一个可用行。但是,特别是三行不起作用。第一次按下宏按钮时,数据将粘贴在正确的位... 查看详情

excel2021网站复制内容突然粘贴不了到单元格

....0.14332.20336)问题描述:EXCEL2021网站复制内容突然粘贴不了到单元格,点击粘贴无反应,关闭表格再重新打开才行解决方案:1.运行输入cmd.exe/cechooff|clip(未解决)2.单元格随便输入1、2数字点击保存,然后再... 查看详情

多个需要复制的内容----自定义复制粘贴--快捷键---的---方法或工具?

...我想设置三个快捷键,复制这三段文字下载一个多次复制粘贴快捷键软件工具。如下参考:1.下载复制和粘贴工具。2.打开应用程序,输入密码,然后点击确定,密码在压缩包中的密码TXT文件中。3.进入软件后,设置粘贴快捷键。... 查看详情

带有粘贴插件的tinymce在chrome中丢失格式

我复制的是一个html表格的内容,放到富文本框中的后,内容除了图片和自定义的a标签,img标签的样式,其他的表格样式都丢失了,然后去看了文档,找到了这个属性,亲测有效。paste_webkit_styles:"colorfont-size",  查看详情