将Excel表数据复制到TinyMCE编辑器

时间:2016-06-07 06:11:44

标签: javascript html excel tinymce tinymce-4

我正在使用tinyMCE编辑器来允许用户为他们的文章创建内容。它还允许用户将excel和word内容复制并粘贴到编辑器中。

当我将excel表复制到编辑器中时,Header行被视为div元素。我注意到标题行td<b>。当我删除<b>标记标题时,行也按预期工作。样本内容如下:

<table>
 <tr>
    <b> <td></td></b>
    <b> <td></td></b>
    <b> <td></td></b>
    <b> <td></td></b>
 </tr>
 <tr>
     <td></td>
     <td></td>
     <td></td>
     <td></td>           
 </tr>
 <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
 </tr>
</table> 

我正在从excel处理的样本表

Table that i'm coping from excel

编辑器输出

enter image description here

编辑器配置如下:

paste_retain_style_properties: "all",
paste_strip_class_attributes: "none",
extended_valid_elements: "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],table[style|class|border=2|width|cellspacing|cellpadding|bgcolor],colgroup,col[style|width],tbody,tr[style|class],td[style|class|colspan|rowspan|width|height],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",

是否有任何想法将此标题行添加到编辑器或以任何正确的方式从内容中提取<table>代码并删除<b>代码?

1 个答案:

答案 0 :(得分:0)

我不确定“extract <table> tag”究竟是什么意思,但要删除<b>,您可以为paste插件配置paste_preprocess选项。 这样的事情应该可以胜任:

paste_preprocess: function(plugin, args) {
 console.log(args.content); // your content
 args.content = args.content.replace(/<b>\s*<td>([^td]+)<\/td>\s*<\/b>/gmi, "<td>$1</td>");
}

https://www.tinymce.com/docs/plugins/paste/#paste_preprocess