一个文笔一般，想到哪是哪的唯心论前端小白。
🧠 - 简介
这篇主要涉及到了两个编辑器的使用：富文本编辑器和 markdown 编辑器。
富文本编辑器在一般的项目中其实使用率并不是很高，只有在文档管理相关的应用中会使用。而 markdown 编辑器则跟个多的是供大家写产品文档或者开发文档使用的。
两者比较之下，富文本编辑器提交了一堆的 html标签 用来实现样式，而 markdown 编辑器则是有自己的语法规则结合定制化主题实现文档效果。
这两个各有各的特色，具体如何取舍还要看项目需求。
除了这两种之外，就是低代码的使用多拉拽去编辑一个文本域了，这个暂时不考虑，因为涉及到了另一个领域了，本系列主要是B端项目的快速落地。
👁️ - 分析
通过种种筛选考虑，选择了这两个编辑器：
- 富文本编辑器： wangEditor
- markdown编辑器： Editor.md
而具体使用主要是侧重两个方向：
- 能够正常的编辑内容，包括上传图片、提交数据等，并且够异步获取内容，正常回显进行二次编辑；
- 样式调整，因为我的layout现在几乎都是自适应宽高的，编辑器也是这样，不能出乱子。
🫀 - 拆解
需求很简单了，直接对着文档，搞就好了！
💪 - 落实
先放两张效果图吧：
富文本编辑器
富文本编辑器其实官方文档已经写得很好啦！感谢大佬！！！
这里主要是需要注意高度自适应的问题：
.article-content {
flex-grow: 1;
height: 0;
:deep(.content-editor) {
// 文本内容不超出可视范围
// 20px 为 padding 值
// 框架内部的高度为 100% ，但是这个 100% 是整个 main-page 的高度
height: calc(100% - $h - 20px * 2) !important;
}
如上这行 css，解决了文本内容会超出可视范围的问题。
markdown 编辑器
这个编辑器我没有深究，主要是让它先跑起来了，看着功能应该是能实现大部分的场景了。
而且官方文档上是支持很多的扩展的，只要自己研究一下主题配置，就可以做出很漂亮的 MD文档了。
发布示意图
发布这块我主要是参考了掘金这个编辑器，点击按钮打开抽屉，在抽屉里面提交相关信息。
🛀 - 总结
我最近做的业务里面，其实富文本编辑器的出现频率还是很低的，而且用的时候非但没有基于这些现有的工具进行二开，反而会因为种种原因进行功能删减。所以这块就按照我自己的理解，简单粗暴的把官网 demo 搬了过来。
系列文章:
- 脚手架开发
- 模板项目初始化
- 模板项目开发规范与设计思路
- layout设计与开发
- login 设计与开发
- CURD页面的设计与开发
- 监控页面的设计与开发
- 富文本编辑器的使用与页面设开发设计
- 主题切换的设计与开发并页面
- 水印切换的设计与开发
- 全屏与取消全屏
- 开发提效之一键生成模块(页面)
