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 语法抱着试一试的心态，前几条效果还不错，图片如下：

但是到换行就出了问题，后端发送的文本：“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>

效果：

看着没有对齐有点怪怪的。查看样式发现有 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>

效果：

本人刚入门前端不到一个月，如有错误欢迎大佬批评改正！

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-04-23/161442.html，文章来源：网络cs，作者：峨乐，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！