上一篇文章里，简单介绍了 WangEditor 的使用，以及配置图片上传等基础功能，理论上到此为止，基本的使用其实就已经可以满足了。但是现实往往比你想象的残酷，有句话叫做「你有你的计划，世界另有计划」，欢迎来到残酷的现实世界。
对上一篇文章感兴趣的读者可以访问下面链接：juejin.cn/post/684490…
上面已经把编辑器创建出来了，这只是第一步。本篇文章着重梳理下在使用这款编辑器时，遇到了哪些问题、如何解决问题和为什么会出现这些问题。一步步由浅入深，从发现问题到解决问题，再到追溯问题的根源，让你对这款编辑器的认识更加深刻。
涉及到的内容如下：
- 表格的处理（明明编辑时有边框，为啥渲染时就没了）
- 编辑器里删除图片，服务器要不要删除
- 图片的宽和高怎么设置（和微信编辑器做对比）
- 更改字号的方案
1. 表格的处理
在编辑内容的时候，倘若需要插入一张表格，编辑完成后，渲染到页面时就会发现——表格的边框不见了。WTF？刚刚编辑时还在的，怎么突然就不见了？
从现象上分析，肯定跟 CSS 样式有关系，能影响边框的那一定就是 border 属性了吧。
那我们就去选择表格查看元素，会发现对表格设置了 border 属性值为 0，嗯，难怪渲染时候没有边框显示了，原来是编辑器的锅。
然而细心的你会发现似乎还有哪里不对，为啥编辑器里能看到边框呢？如果编辑器不背这口锅，岂不是要轮到自己头上？这绝对不行！
能影响边框的肯定就这一个 border 属性，但样式是可以被覆盖的。那么真相只有一个，针对编辑器里面的表格单独设置了额外的边框样式。再一次仔细查看元素，你看到一个额外设置表格的样式：
.w-e-text table {
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
}
没错，这就是罪魁祸首，还是编辑器的锅。
你以为到这里就完了？天真！编辑器还有话要说：“再仔细看看样式，这怎么只有顶部和左边的边框？” 仔细一看，卧槽，还真是。同样的方法，你最终会发现不仅表格上设置了额外的样式，列标签（th 标签和 td 标签）上还有下边和右边的边框样式。
问题的原因找到了，那么对应的解决办法也就很简单了。渲染的地方是不是也是一块儿区域？那我针对这块区域里的表格单独设置样式就行了有木有。
学会合理的用样式去处理内容，你会发现很有用，记住这一点。
2. 编辑器里删除图片，服务器要不要删除
其实这个不应该算作问题，但是却有不少人在群里问。弄清楚下面几个问题，或许你就明白到底有没有必要了。
一，图片的大小会影响在网上加载的时间，影响体验，所以图片不宜过大，那么所占用的空间也就不会有多少。
二，为了实现服务器同时删除图片功能，要花费多大的力气？从实现上来讲，需要知道你删除图片的动作，然后调用后台接口删除服务器上对应的图片。单说这最基本的两步，确切的知道你删除图片的动作都已经挺难搞了，你有好的办法么？哪怕实现了，能带来什么好处？节省点存储空间？那么我额外需要耗费资源来查找文件位置，然后删除，这是不是又浪费了资源？
所以啊，得考虑下投入产出比，也就是 ROI。
三，假如图片不是从本地上传，而是从素材库里面选择，还能删除么？这一点会涉及到一张图片可能会被多篇文章引用，删掉了这张图片，其他文章是不是就加载不出来这图片了？别认为素材库不会存在，在我看来，做个素材库功能比服务器删除图片功能合适 100 倍！
如果上面几个问题都认真想过了，还想着实现这样的需求，那我也没办法，祝君好运。
3. 图片的宽和高怎么设置
其实图片的宽高没法通过编辑器来设置，同样的方法去检查元素，你会发现图片有个内联样式——设置了图片最大宽度为 100%。
这样做有啥好处呢？
众所周知，要想图片完整需要保持宽高比，也就是在设置样式的时候要么设置宽度，要么设置高度，这样图片会自动保持等比例缩放。另外一方面，倘若图片超过了原图片的宽高，视觉上会感觉到模糊，所以图片是原尺寸或者等比例缩小是没影响的。
那么图片最多能多大呢？也就是撑满整个父容器的宽度了吧。但是如果图片的宽度比父容器宽度小，撑满之后可能就会模糊，也就是说很大程度上内容里面的图片时需要裁剪或者定制的。
对比下微信公众号的编辑器，也就多了一个「自适应手机屏幕宽度」和「裁剪功能」，好好想想你真的需要在编辑器里设置图片的宽高么？
那么不在编辑器里面设置，还能在哪设置？还记得上面提到过的表格处理方式么，在渲染的地方用样式去统一控制图片的宽高会不会更加合适一点。怎么样，合理利用样式是不是真的很重要哇。
4. 更改字号的方案
对于这一点，WangEditor 是没有提供自定义配置的。不死心的同学可以去看看源码，针对字号在源码里已经写死了，并且还不提供修改的配置。
当你看源码的时候，你会发现 font-size 属性的值竟然是 small 、nomal 等字符串，而不是数字加上 px 单位，你看到的没错，font-size 属性支持这些关键词了。
其实我也觉得这一点不太合适，毕竟看这些关键词不能确切的知道字号的大小。对比下微信公众号编辑器，发现字号就很明确了，这一点值得学习。
既然微信公众号编辑器那么香，我也想要怎么办？当然自己动手，丰衣足食了哇。
想要直接的通过修改配置方式去实现是不行了，门已经封死了。那就转变下思路，翻窗户吧。
反正都是要自己做了，那是不是可以把原有菜单的字号配置去掉了。然后在外面加一个下拉框，里面放自己需要的字号列表。然后选中需要修改字号的内容，下拉列表选择对应的字号，设置内容的字号样式属性不就可以了么。然后当编辑内容时，及时更新该内容对应下拉列表的字号，可以让用户一眼看到我当前这一行文字的字号是多少，是不是挺简单的呀。
不是我坐着打字不腰疼，仔细看 WangEditor 的文档，你会发现这完全是可行的。当然，你首先得有类似这样的思路，才会促使你去寻找解决办法。
关于代码实现部分就不再这里贴出来了，我发现上篇文章的代码块太多，感觉阅读体验不太好，所以这里只给了实现思路。当然，为了防止你们说我光说不做嘴把式，我特意去实现了一个简单的案例才写这篇文章的，有备而来！
以上就是这篇文章的主要内容了，简单总结一下。这篇文章没有贴代码是怎么实现的，重点焦距在问题的发现和寻找问题的原因，因为我觉得找问题和理解问题是很重要的一项技能。解决问题通常是不难的，难的是应该怎么解决，为什么这样就能解决问题——这归根结底都是没搞清楚问题是怎么产生的。
就像医生一样，先得询问你病情，配合各种仪器做全面检查才会给你开药吧。
遇到问题多找找原因，引起问题的原因有哪些，怎么样去验证，排除一个个变量的影响，这种能发现并解决问题的能力才是值得培养的。
