使用mavonEditor写文章，并且很好的预览。

旧城等待， 2024-04-17 06:02 63阅读 0赞

> 最近在写博客，选了好久的编辑器最终选中了mavonEditor，它也没有让我失望，下面我们就来看一下它的使用吧

## 1、演示（先来看一下我做成的最终效果吧） ##

#### 1-1:编辑 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70]

#### 1-2：预览 （由于截图工具的原因，没有全部框出来。一直到点个赞上面都是噢） ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 1]

## 2、解释 ##

**2-1、我编辑和预览都是用的mavonEditor。最开始我想自己去实现预览功能，我发现这个想法是愚蠢的**  
  
**2-2、使用mavonEditor预览的好处**  
2-2-1：你不用担心数据库存什么，直接存它的markdown语法就好了。最开始我自定义预览的时候还保存了html  
2-2-2：你不用去想着怎么解决代码高亮的问题  
2-2-3：你不用担心图片太小无法看清楚，要自己实现点击查看。 这个mavonEditor已经实现好了  
2-2-4：等待发掘…

## 3、使用 ##

**对于后台的编辑就比较简单就不说了，直接存markdown就好了不用管其他的。我这里就说一下前台的预览**

#### 第一步：和后台使用一样的引入mavonEditor ####

#### 第二步：设置如下属性（属性含义自行去看官方文档） ####

**这里你可能遇到，背景颜色、和边框的问题看这里 [mavonEditor 修改预览背景颜色、去除边框和阴影][mavonEditor]**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 2]

<no-ssr>                                
     	<mavon-editor                                    
     		v-model="bamFrom.bafMarkdown"                                     
     		:subfield="false"                                    
     		:boxShadow="false"                                    
     		defaultOpen="preview"                                    
     		:toolbarsFlag="false"                                   
     	 />                            
     </no-ssr>

**如果还有不明白的可以给我留言，我会尽快回复你的**

如果对你有帮助的话，可以关注我的微信公众号支持一下噢

![在这里插入图片描述][20200301163039181.jpg]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/9e280c0d2b934900aa81145ccd0c648b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/2b629b0ac29d470da5bded5164affbbb.png
[mavonEditor]: https://blog.csdn.net/Tomwildboar/article/details/100068442
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/e505db83b13e4e058749f8a5a21657c3.png
[20200301163039181.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/4919bb9076c44a5194974f6d3ecfa94a.jpg