Mavon-Editor - vue2 前端显示

这篇具有很好参考价值的文章主要介绍了Mavon-Editor - vue2 前端显示。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在做毕设的时候想到能不能在前端页面支持 markdown 语法，现在来复现一下出现的问题，以及解决方案。

首先是 markdown 编辑器的引入

这里推荐 MavonEdit 因为我感觉这个做的相对比较完善一些。

向后端添加数据

这里就比较简单了，直接向后端发送请求。后端再存储到数据库当中，无需做数据处理，存到数据库就是以文本的格式。贴一下部分代码：

<div>
   <label for="feedback-user"
   class="mt-2">数据范围与提示:
   </label>
   <mavon-editor v-model="problem.Illustrate"/>
</div>
<div>
<b-button block variant="primary" class="mt-3" @click="add()">添加题目</b-button>
</div>
<script>
methods:{
    ...mapActions('problemModule', { addProblem:'add' }),
    add(){
      this.problem.UserId = this.userInfo.id;
      console.log(this.problem)
      this.addProblem(this.problem).then(() => {
        // 请求成功
        console.log("problem add");
      }).catch((error) => {
        this.$bvToast.toast(error.response.data.msg, {
          title: '数据验证错误',
          variant: 'danger',
          solid: true,
        });
      });      
    },
  },
</script>

注意：如果有多个编辑框的话，要设置一下自动聚焦到文本框，属性 autofocus Boolean true

前端拿到数据渲染

刚开始用的时候就去看了 MavonEdit 的 issues 果然里面有问到前端如何进行数据渲染的详见前端解析 markdown 样式问题我试了一下，但是好像不行，然后就换了方法，看到了 marked 也能解析 markdown 语法抱着试一试的心态，前几条效果还不错，图片如下：
Mavon-Editor - vue2 前端显示,前端,前端,html
但是到换行就出了问题，后端发送的文本：“1 1\r\n5 3\r\n10 20” 这里发现没有换行，我有测了一下其他的语法语法如下图：

结果角标 6 和 9 旁边的两个 ^ ^ 都在，又看了网上大佬的教程还是一头雾水。贴一下 marked 代码：

<h3 class = "Header">题目描述：</h3>
<div v-if="problem" v-html="desc"></div>  
<script>
// 局部使用一定要加上 { } 不然会报错
	import { marked } from 'marked';
    desc() {  
      // 使用 marked 将 Markdown 转换为 HTML 
      if(this.problem.data.description)  return marked(this.problem.data.description);  
      return '';
    },
</script>

在看了大量的文章之后决定用 MavonEdit ，因为我感觉即使别的编辑器不能解析，那它本身自带的 preview 应该不会出问题所以又换回了 MavonEdit，基础设置详见仓库地址，设置部分样式结果如下：
代码：

<mavon-editor 
          v-model="problem.data.illustrate"
          class="content-show"   
          :subfield="false" 
          defaultOpen="preview"
          :editable="false" 
          :toolbarsFlag="false"
          :boxShadow="false" previewBackground="#ffffff "/>
<style>
.content-show {
  min-height: 60px;
  /* height: 100% !important; */
  border: none !important;
}
</style>

效果：
Mavon-Editor - vue2 前端显示,前端,前端,html
看着没有对齐有点怪怪的。查看样式发现有 padding

p 标签里面还有 margin-bottom，又看了很多文章参考文章参考文章看完很多文章之后我了解到，里面的 css 样式是可以覆盖的。再去 issues 里找到了答案。
最后的解决方案可以用 /deep/ 覆盖
代码：

<mavon-editor 
          v-model="problem.data.illustrate"
          class="content-show"   
          :subfield="false" 
          defaultOpen="preview"
          :editable="false" 
          :toolbarsFlag="false"
          :boxShadow="false" previewBackground="#ffffff "/>
<style>
.content-show {
  min-height: 60px;
  /* height: 100% !important; */
  border: none !important;
}
/deep/ .v-note-wrapper .v-note-panel .v-note-show .v-show-content,
/deep/ .v-note-wrapper .v-note-panel .v-note-show .v-show-content-html {
  width: 100%;
  height: 100%;
  padding: 0;
  overflow-y: auto;
  box-sizing: border-box;
  overflow-x: hidden;
}

/deep/ .markdown-body p{
    margin-top: 0;
    margin-bottom: 0;
}
</style>