vue实现markdown编辑器(vue3 markdown编辑器)

作者：电脑培训网 2024-05-02 18:16:19 904

Vue项目集成Markdown标记语言编辑器Markdown编辑器的使用

这是一个基于Vue的Markdown编辑器。它可用于编辑Markdown语法和解析效果图。mavonEditor实现Markdown集成。Markdown是一种标记语言，比word文档更清晰、更方便，适合做笔记。将Markdown集成到自己的项目中后，就可以在项目1、安装mavonEditor包

vue实现markdown编辑器(vue3 markdown编辑器)

mavon-editor:2.10.4版本中使用Markdown编辑器

npminstallmavon-editor--s

NPM安装Mavon-editor-保存

2、引入并使用mavonEditor,以下二选一

全局注册(大部分页面都需要markdown解析的推荐使用）main.js中引入

//ES6IMPRICTMAVONEDITOR的导入来自'Mavon-editor'import'Mavon-editor/dist/dist/dist/css/index.css'//使用vue.use

局部注册页面中引入

import{mavoneditor}来自'mavon-editor'import'mavon-editor/dist/dist/css/index.css.css'exportdeftault{this.dialogformvisible=truethis.form={}}，handingeDit{this.form=json.parse）this.dialogformvisible=true}，//{让$vm=this。$refs.md//步骤1.将图像上传到服务器。constformData=newFormData();formdata.append;axios({url:'post',data:formData,headers:{'Content-Type':'multipart/form-data'},}).then((res)={//步骤2.将返回的URL替换为文本的原始位置！[.]-！[.]/***$vm是指mavoneditor实例可以通过以下两种方式获取*1.通过引入对象：`import{mavonEditor}from.`等方法获取，*`$vm`就是`mavonEditor`*2.通过$refshtml获取：语句参考：`mavon-editorref=md/mavon-editor，*$vm`is`this。

新增/编辑效果图如下：

4.预览/详情文章功能代码：

el-table-columnprop='content'label='artistcontent'templateslot-scope='scope'elbutton@click='view/el-button/template/el-table-column!--点击查看内容显示弹窗启动--el-dialogtitle='文章信息':visible.sync='viewDialogVis'width='60%'el-card//预览/详细信息框divmavon-editorclass='md':value='content':subfield='false':defaultOpen=''pview'':toolbarsFlag='false':editable='false':scrollStyle='true':ishljs='true'//div/el-card/el-dialog！-单击以查看内容以显示弹出窗口toend-data{return{content:''，viewDialogVis3:false}}，方法：{view{this.content=contentthis.viewdialogvis=true}，

文章预览效果图：

详情代码参考：

divclass='pd-10'style='font-size:22px;color:3F5EFB;cursor:指针'@click='$router.push('/front/articleDetail?id='+item.id)'{{item.name}}/div

模板divstyle='color:#666'divstyle='margin:20px0;'divclass='pd-10'style='font-size:40px;color:3F5EFB;光标：指针'{{article.name}}/divdivstyle='font-size:20px;margin-top:10px;float:右；'iclass='el-icon-user-solid'/ispan{{article.username}}/spaniclass='el-icon-time'style='margin-left:20px'/ispan{{article.createTime}}/span/div/divdivstyle='margin-top:60px'mavon-editorclass='md':value='article.content':subfield='false':defaultOpen=''pview'':toolbarsFlag='false':editable='false':scrollStyle='true':ishljs='true'//div/div/templatescriptexportdefault{name:'ArticleDetail',data(){return{article:{},id:this.$route.query.id}},创建(){this.loadArticleDetail()},methods:{loadArticleDetail(){this.request.get('/article/detail/'+this.id).then(res={console.log(res.data)this.article=res.data;})}}}/scriptstyle范围/样式

详情效果图：