一个文笔一般，想到哪是哪的唯心论前端小白。

🧠 - 简介

这篇主要涉及到了两个编辑器的使用：富文本编辑器和 markdown 编辑器。

富文本编辑器在一般的项目中其实使用率并不是很高，只有在文档管理相关的应用中会使用。而 markdown 编辑器则跟个多的是供大家写产品文档或者开发文档使用的。

两者比较之下，富文本编辑器提交了一堆的 html标签用来实现样式，而 markdown 编辑器则是有自己的语法规则结合定制化主题实现文档效果。

这两个各有各的特色，具体如何取舍还要看项目需求。

除了这两种之外，就是低代码的使用多拉拽去编辑一个文本域了，这个暂时不考虑，因为涉及到了另一个领域了，本系列主要是B端项目的快速落地。

👁️ - 分析

通过种种筛选考虑，选择了这两个编辑器：

富文本编辑器： wangEditor
markdown编辑器： Editor.md

而具体使用主要是侧重两个方向：

能够正常的编辑内容，包括上传图片、提交数据等，并且够异步获取内容，正常回显进行二次编辑；
样式调整，因为我的layout现在几乎都是自适应宽高的，编辑器也是这样，不能出乱子。

🫀 - 拆解

需求很简单了，直接对着文档，搞就好了！

💪 - 落实

先放两张效果图吧：

富文本编辑器

富文本编辑器其实官方文档已经写得很好啦！感谢大佬！！！

这里主要是需要注意高度自适应的问题：

css 复制代码

.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页面的设计与开发

监控页面的设计与开发

富文本编辑器的使用与页面设开发设计

主题切换的设计与开发并页面

水印切换的设计与开发

全屏与取消全屏

开发提效之一键生成模块(页面)

YGG-CLI-8-富文本编辑器的使用与页面设开发设计