Wangeditor自适应，代码块，上传图片（express）

前言：第一次用富文本就直接上手了wangeditor了。遇到了一些问题和本身的解决方法记录。小老弟的博客： leoon.design  ，文章也首发于博客嘻嘻

1.工具栏自适应

已经操做上手的同窗可能已经发现了，这个富文本的工具栏是不换行的，缘由是换行太丑了，做者默认他不许换行（这话是真的，文档可见）。处理手段也很简单暴力， F12打开检查工具栏什么影响了他，不断操做影响布局的样式。得出结果。

<div style="width: 100%"><div id="editor" class="editor"></div> //这是个人建立富文本代码，width=100%哦</div> $(".w-e-toolbar").css("flex-wrap", "wrap"); //建立完编辑器后，用JQ给他修改下flex-wrap复制代码

这样就直接能够自适应了。什么？你还想高度填满？个人手段就是。

首先进入wangeditor.js这个文件，定位到4402行左右，或者你本身f12看看如何快速定位到这个正文栏设置大小。做者已经给他的高度设置了默认大小好像是300px左右，我给他写了个灵活点的。以下图

2.代码块和其余一些样式的注意事项

表情那些我没用，代码块这些是死的，因此比较好改。咱们在富文本里面写代码块能够有边框样式，可是显示到前台，就没有了。缘由是咱们须要本身在前台给正文这块设置样式。

代码块的标签是：pre；

前言是:blockquote;

固然这些你均可以本身f12看看是啥，而后在富文本里看看他的样式怎么写的，你也能够自定义之类的

这里还要注意的是，前台正文的图片一致要设置 max-width，否则撑开div咯

3.上传图片，基于express。

这里搞了很久。直接先附上先后台代码，我是先后端分离的。这里主要也就是请求路径不一样而已。重点：建议wangeditor的1,2,3代文档均可以看看。看云那里点击做者就能够看到三代的文档了。我这个是看了文档，加在github上看了一个大佬的源码的。

大概这样就大功告成了。遗憾的是代码高亮解决不了，貌似3开始不支持highlight了，源码在开头博客，掘金好像会自动压缩。。