Tinymce编辑器从word中粘贴内容，如何对内容进行样式修改？

雨点打透心脏的1/2处 2023-05-31 07:52 29阅读 0赞

当从word中粘贴含多个表格的内容时，格式不正确的问题，在网上寻找了很多方法，都没有找到正确的解决方式。效果显示如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NDU1MTc_size_16_color_FFFFFF_t_70][]

粘贴功能是用的tinymce的paste插件实现的。在tinymce的官方文档中查看了paste的所有属性也无果。查看编辑器中内容的样式发现，div还有table的样式设置一下就好了。于是就用content\_style属性中设置了一下，代码如下：

再打开编辑器查看，发现原来错位的地方显示正常了，但保存到后台，在Pad中查看内容显示效果的时候，发现在content\_style中添加的样式根本插入不到数据内容中去。于是，尝试用paste\_postprocess方法后，发现问题解决，代码如下：

paste_postprocess: function(editor, fragment) { // word内容粘贴过程中对内容进行修改
                var allDivs = fragment.node.getElementsByTagName("div"); 
                var allTables = fragment.node.getElementsByTagName("table"); 
                for (let i = 0; i < allDivs.length; ++i) { 
                var st = allDivs[i].style; 
                allDivs[i].style.overflow = 'hidden'
                } 
                for (let i = 0; i < allTables.length; ++i) { 
                var st = allTables[i].style; 
                allTables[i].style.margin = '0 auto'
                allTables[i].style.float = 'none'
                } 
            },

这段代码同样写在window.tinymce.init中。

正常显示效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NDU1MTc_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NDU1MTc_size_16_color_FFFFFF_t_70]: /images/20230531/c3bbd21a0f054f3891d20898e5f919aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NDU1MTc_size_16_color_FFFFFF_t_70 1]: /images/20230531/9e756e119e264df9b91868299d0e7562.png