VUE工程中使用markdown——展示

前言

上一篇文中说到，mavon-editor要怎么展示出来呢，请看分解

干货内容

先引入吧 同样是局部调用 import {mavonEditor} from "mavon-editor"; import "mavon-editor/dist/css/index.css";

2.配置展示参数 用到了compute

computed: { prop () { let data = { subfield: false,// 单双栏模式 defaultOpen: 'preview',//edit： 默认展示编辑区域 ， preview： 默认展示预览区域 editable: false, toolbarsFlag: false, scrollStyle: false, boxShadow:false//边框 } return data } }

这个参数很重要哦，主要目的是隐藏编辑框只展示预览框，就达到了展示的目的 想要更改更多的样式，可以搜一下，这里只展示一个思路 3.放进页面中

<mavon-editor class="md" :value="article_msg.article_content" :subfield = "prop.subfield" :defaultOpen = "prop.defaultOpen" :toolbarsFlag = "prop.toolbarsFlag" :editable="prop.editable" :scrollStyle="prop.scrollStyle" :boxShadow="prop.boxShadow" ></mavon-editor>

这个prop就是刚刚computed的函数啦，调用嘛 这样就成功的 把内容展示了出来

总结

所以用这个mavon-editor的好处是什么呢？

不用处理图片，它帮你弄了，当然如果你要转换或者压缩的话，也有方法，还是老话：搜不用处理文本的样式，比如空格回车啊什么的，反正它都保存到数据里的不用处理标签，我们处理数据的时候都要将数据过滤一下，以防攻击，这里就不必了等等，还有一些想不出来了 上效果图： 更多内容请看：https://blog.csdn.net/weixin_44000275 不会怎么引入编辑器的也请看它哦！

最后，欢迎指出错误与不足！