第060个
专栏目标
在vue和element UI联合技术栈的操控下,本专栏提供行之有效的源代码示例和信息点介绍,做到灵活运用。
mavon-editor是一款基于vue的markdown编辑器。
示例效果图
示例源代码
/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2023-12-29
*/
<template>
<div class="djs-box">
<div class="topBox">
<h3>vue中markdown编辑器mavon-editor的示例 </h3>
<div>大剑师兰特, 还是大剑师兰特,gis-dajianshi</div>
</div>
<div class="dajianshi" >
<mavon-editor v-model="value"/>
</div>
</div>
</template>
<script>
export default {
data() {
return {
value: '',
}
},
mounted() {
},
methods: {
}
}
</script>
<style scoped>
.djs-box {
width: 900px;
height: 580px;
margin: 50px auto;
border: 1px solid blueviolet;
}
.topBox {
margin: 0 auto 0px;
padding: 10px 0 20px;
background: blueviolet;
color: #fff;
}
.dajianshi {
width: 90%;
height: 480px;
margin: 50px auto 0;
}
</style>
安装插件:
main.js中加载:
页面中引用:
<div id="main">
<mavon-editor v-model="value"/>
</div>
相关API
https://www.npmjs.com/package/mavon-editor
结尾语
Network 灰鸽宝典为开发配置保驾护航,让服务运行快捷平稳。 希望某个知识点就能帮助你,欢迎学习GIS的朋友一起交流。
《 Openlayers 综合示例200+ 》,
《 leaflet示例教程100+ 》,
《 Cesium示例教程100+》,
《MapboxGL示例教程100+》。