复制word图文到富文本编辑器
  9m65el8SCpbP 2023年11月30日 23 0

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

难点

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

解决方法 —— PowerPaste

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

结果展示

 

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

 

 

如果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: "Times New Roman";\">   \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图文到富文本编辑器_富文本编辑器_02

 

 

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

复制word图文到富文本编辑器_指定位置_03

 

用PowerPaste得到的结果如下:

复制word图文到富文本编辑器_指定位置_04

 

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

结论

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

 

参考文章:http://blog.ncmem.com/wordpress/2023/11/10/复制word图文到富文本编辑器/


 

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月30日 0

暂无评论

推荐阅读
  NHaurzrhyr04   2023年12月23日   105   0   0 htmljQueryhtmljQuery
  BEOpup9HILHT   2023年12月23日   76   0   0 htmljQueryhtmljQuery
9m65el8SCpbP