Vue使用markdown编辑器
1.安装
npm install mavon-editor -S
2.main.js全局注册
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
//use
Vue.use(mavonEditor)
3.vue页面使用
<el-form-item label="文章内容">
<mavon-editor ref="md" v-model="form.content" :ishljs="true" @imgAdd="imgAdd"/>
</el-form-item>
imgAdd(pos, $file) {
let $vm = this.$refs.md
// 第一步.将图片上传到服务器.
const formData = new FormData();
formData.append('file', $file);
axios({
url: 'http://127.0.0.1:9090/files/editor/upload',
method: 'post',
data: formData,
headers: {'Content-Type': 'multipart/form-data'},
}).then((res) => {
// 在Markdown文本中插入图片
var url = res.data.data[0].url
// console.log(url)
// const markdownText = `http://127.0.0.1:9090/files/1705996022610-头像.jpg`;
$vm.$img2Url(pos, url);
})
},
4.文章预览
<mavon-editor
class="md"
:value="content"
:subfield="false"
:defaultOpen="'preview'"
:toolbarsFlag="false"
:editable="false"
:scrollStyle="true"
:ishljs="true"
/>
文章来源地址https://www.toymoban.com/news/detail-823140.html
文章来源：https://www.toymoban.com/news/detail-823140.html
到了这里，关于Vue使用markdown编辑器的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
