Wangeditor自适应,代码块,上传图片(express)

1,725 阅读2分钟

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

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了,源码在开头博客,掘金好像会自动压缩。。