文本和图形文件将转换为html,将文档写成html页面的需求

最近遇到一个需求：要将产品说明文档写进页面中。

既然要放在页面中，那就是html代码，看到这就应该想到富文本编辑器，随便一搜就有近十种富文本编辑器推荐，因为是写vue，排名靠前的有vue2-editor、wangEditor等，基础文档也比较清晰，玩一下基本就可以用上了，但是免费开源的毕竟是免费的，用起来总有各种坑，各种想要的功能没有等，总之就是达不到我想要的效果，然后超人鸭在掘金搜到一篇高赞的文章，介绍另一个富文本编辑器tinymce：

Vue之富文本tinymce爬坑录

作者也放上自己的demo，跟着文章搭建(复制)就能看到效果，比起前面说的几款功能更强大丰富一些，但在项目中使用总感觉还是差点什么，不太方便，因为tinymce本身是收费的，只是有一些功能免费，掘金的作者搭建的都是免费的功能，用起来还是达不到我的要求，而且不方便。

在我苦恼的时候，重新看了一遍需求，将文档写入页面中，实在不行叫UI出个设计图，手动敲进html代码里面，再写个样式也可以达到效果，但这未免也太傻了吧。还是要研究一下富文本编辑器的使用，人家就是做这个的。但是功能达不到预期，我又看了一遍需求，将文档写入页面中，要的是将产品说明文档变成html页面，产品说明文档肯定是产品人员进行编写的，我只要把他写的文档变成html代码就ok，为什么非要纠结于如何在项目里搭建富文本编辑器呢，我们项目又不需要用到富文本编辑器，只需要拿到文档转html代码就可以。

想到这，我打开了tinymce的官网，看到他官网有个编辑器，全功能的，包括收费的，我拿不走，但是可以在他官网使用：

image.png

得了！需求实现，只要让产品人员在他官网编辑文档，再把生成的html代码给我放到页面中就ok了。

这是tinymce的官网地址： https://www.tiny.cloud/docs/demo/full-featured/

我们可以试一下

就他初始的demo，点击上面工具栏的view选项下面的source code，就可以得到html代码：

image.png

可以看到代码都生成出来了，样式基本都放在内联style里面，图片先别管，我们把代码复制，然后创建一个html文件放进去看一下效果：

image.png

图片先不管，但是其他东西区别也太大了，再认真看一下代码，发现除了内联style样式外，还有很多带class的标签:

image.png

而且在他官网打开控制台检查元素，发现他有很多样式:

image.png

这个怎么解决呢？其实也非常简单，你的编辑器我拿不走，拿走你的样式还是简简单单的，超人鸭简单试了一下，发现基本的样式都在codepen.min.css、content.css这两个文件中，同样打开控制台，找到属于这个两个文件的样式，点击右上角的文件名:

image.png

image.png

点击去后，点击这个花括号格式化一下：

image.png

然后把这两个文件的内容分别复制出来，自己创建两个css文件存储起来，再在你的html中引入

还有最后一步

同样在他官网打开控制台查看元素，他是在body上添加了几个类名，然后所有样式都带上这个类名：

image.png

所以为了达到效果，我们一样要在最外层(可以包一个div，不建议在body上加class)的元素上加上和他一样的类名，为了一致，最好把body上所有属性都复制上，里面有一个属性叫contenteditable他设置成true，这个属性让内容可以编辑，我们把这个属性设置成false或者删掉就可以。

在引入样式文件和在最外层包裹一个和他官网body一样属性的div后，我们看看效果:

image.png

除了图片其他都一致了，基本达到想要的效果了。

说说图片的问题

正常使用富文本编辑器添加图片的流程是调用他的api，配置好存储图片的服务器地址，通过上传成功后返回图片地址，再渲染到img标签的src中，超人鸭这次讲的内容有点旁门左道的感觉，这个正常图片的上传流程肯定是达不到了，只能通过手动添加去实现。

最后

这次文章的主题是将文档写成html页面的需求，目前超人鸭觉得这是最好的解决办法，让产品人员编写文档后把代码给前端人员，渲染页面。如果你更好的解决办法，或者有更好的富文本编辑器使用方法(一定是有的)，欢迎指教哦。

作者微信: Promise_fulfilled