复制word图文到富文本编辑器

任务：用户需要将大量word中的图文粘贴到网站富文本编辑器。

难点

大部分富文本编辑器能做到还原word的文本格式，例如字体字号表格以及布局相关的要素还原。但普遍对图片的支持比较差，都需要手动点击图片上传按钮，然后在光标的当前位置，插入指定的图片。这样用户的体验就非常糟糕，为什么不能直接复制粘贴，一步到位呢？
其实，从富文本编辑器里还原word的图文内容是一件挺麻烦的事情。因为word里的超文本语法跟web的html语法并不一致，需要做大量的转码工作。

解决方法 —— PowerPaste

经过调研，发现TinyMCE有一款付费插件PowerPaste，能够完美的支持该功能。其原理是先将剪切板里的图片转换为Base64编码格式的图片，然后再插入到指定位置。

结果展示

 

 

 

如果word里只有上面这一行简单的文字，我们用普通的富文本编辑器，得到的结果如下：

<p class=\"MsoListParagraph\" style=\"margin-left:36.0pt;text-indent:-36.0pt;\nmso-char-indent-count:0;mso-list:l0 level1 lfo1\"><!--[if !supportLists]--><span lang=\"EN-US\" style=\"font-size:16.0pt;font-family:仿宋;mso-bidi-font-family:仿宋\">1、<span style=\"font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 7pt; line-height: normal; font-family: &quot;Times New Roman&quot;;\">&nbsp;&nbsp;&nbsp;\n</span></span><!--[endif]--><span style=\"font-size:16.0pt;font-family:仿宋;\nbackground:yellow;mso-highlight:yellow\">计划</span><span style=\"font-size:16.0pt;\nfont-family:仿宋\">完的<b>展示</b>功能。<span lang=\"EN-US\"><o:p></o:p></span></span></p>

用PowerPaste得到的结果如下：

<ol style="margin-bottom: 0cm; margin-top: 0px;">\n<li style="margin: 0cm 0cm 0cm 0px; text-align: justify; font-size: 10.5pt; font-family: 等线; text-indent: 34px;"><span style="font-size: 16.0pt; font-family: 仿宋; background: yellow;">计划</span><span style="font-size: 16.0pt; font-family: 仿宋;">完的<strong>展示</strong>功能。</span></li>\n</ol>

可以看出，PowerPaste得到的结果更加简洁，符合html语法。

带图片的文档

 

 

 

稍微复杂的word文档，粘贴到普通富文本编辑器，得到的结果如下：

 

 

用PowerPaste得到的结果如下：

 

 

可以看出，PowerPaste插件能够完美的还原word图文。

结论

如果需要频繁的从word、excel中拷贝带有图片的数据到富文本编辑器中，那么TinyMCE+PowerPaste插件是非常好的选择。

 

参考文章：http://blog.ncmem.com/wordpress/2023/11/10/%e5%a4%8d%e5%88%b6word%e5%9b%be%e6%96%87%e5%88%b0%e5%af%8c%e6%96%87%e6%9c%ac%e7%bc%96%e8%be%91%e5%99%a8/

欢迎入群一起讨论