最近在写博客,选了好久的编辑器最终选中了mavonEditor,它也没有让我失望,下面我们就来看一下它的使用吧
1、演示(先来看一下我做成的最终效果吧)
1-1:编辑
1-2:预览 (由于截图工具的原因,没有全部框出来。一直到点个赞上面都是噢)
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 修改预览背景颜色、去除边框和阴影
<no-ssr>
<mavon-editor
v-model="bamFrom.bafMarkdown"
:subfield="false"
:boxShadow="false"
defaultOpen="preview"
:toolbarsFlag="false"
/>
</no-ssr>
如果还有不明白的可以给我留言,我会尽快回复你的