vue使用mavon-editor（markdown）富文本编辑

vue使用mavon-editor（markdown）富文本编辑最近想开发一个自己的博客网站，这个东西的话，难点重点应该都在前端这里。我能想到的：1.实现一个markdown的富文本编辑器2.能够上传图片，输入代码，并且可以预览效果。发布上传到数据库3.页面回显。能够根据上传到数据库的文本进行回显内容4.其他markdown富文本编辑demo效果图：打印文章内容：就把这个存到数据即可，须带有\n这

_小郑有点困了

2849人浏览 · 2021-08-04 10:06:55

_小郑有点困了 · 2021-08-04 10:06:55 发布

vue使用mavon-editor（markdown）富文本编辑
最近想开发一个自己的博客网站，这个东西的话，难点重点应该都在前端这里。

我能想到的：
1.实现一个markdown的富文本编辑器
2.能够上传图片，输入代码，并且可以预览效果。发布上传到数据库
3.页面回显。能够根据上传到数据库的文本进行回显内容
4.其他

markdown富文本编辑demo

效果图：

在这里插入图片描述

打印文章内容：

在这里插入图片描述
就把这个存到数据即可，须带有\n这样的文本符号，才能正确显示结构，只是html结构可能会造成显示异常。

安装引入：

npm i mavon-editor -S

main.js引入：

import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)

代码实现：

<template>
  <div class="home">
    <mavon-editor :codeStyle="codeStyle" :toolbars="toolbars" v-model="content" :ishljs="true" ref="md" @change="change"/>
    <el-button @click="outputENter">输出</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: "这里是markdown编辑的内容",
      page_article:undefined,
      html_content:undefined,
      md_content:undefined,
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        navigation: true, // 导航目录
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        subfield: true, // 单双栏模式
        preview: true // 预览
      },
      codeStyle:'monokai-sublime',//主题
      test_html:undefined
    };
  },
  methods:{
    outputENter(){
      // console.log(JSON.stringify(this.content))
      // console.log(this.$refs.md.d_render)
      // console.log(this.$refs.md.d_value)
      console.log(JSON.stringify(this.test_html))   //就用这个存数据库  然后进行回显即可
      this.$axios.post("http://127.0.0.1:3009",{
        params:{
          msg:this.test_html
        }
      }).then((res)=>{
        console.log(res)
        console.log("响应成功")
      })
    },
    change(value, render){
      // render 为 markdown 解析后的结果
      this.test_html = render;
    }
  }
};
</script>

markdown回显：

这里是可以正确显示整篇文章内容的，不需要去解析识别内容。

<template>
  <div class="ueditor">
     <mavon-editor class="markdown-body" codeStyle="monokai" v-html="codeData2"></mavon-editor>
     <br>
     <mavon-editor class="markdown-body" codeStyle="monokai" v-html="codeData3"></mavon-editor>
     <br>
  </div>
</template>
<script>
import codeDatas from './data'
export default {
  data () {
    return {
      codeData2:codeDatas.codeData2,
      codeData3:codeDatas.codeData3,
      msg:undefined,
    }
  },
  methods: {
  }
}
</script>
 
<style lang="scss" scoped>
.hljs{
  font-size: 15px;
}
.info{
  border-radius: 10px;
  line-height: 20px;
  padding: 10px;
  margin: 10px;
  background-color: #ffffff;
}
</style>

data.js:

let datas = {
  codeData:"function(){\n     console.log(1233)\n}",
  codeData1:"<!DOCTYPE html>\n<html>\n<head>\n<title>Vue2.x</title>\n<meta charset=\"utf-8\">\n<script src=\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\"></script>\n</head>\n<body>\n<div id=\"app\">\n 网站名：{{ message }}\n</div>\n\n<script>\n var app = new Vue({\n   el: '#app',\n   data: {\n     message: \"自如初博客\"\n   }\n })\n</script>\n</body>\n</html>",
  codeData2:"<p>这里是markdown编辑的内容</p>\n<pre><div class=\"hljs\"><code class=\"lang-html\"><span class=\"hljs-meta\">&lt;!DOCTYPE html&gt;</span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title</span>&gt;</span>Vue2.x<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">title</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta</span> <span class=\"hljs-attr\">charset</span>=<span class=\"hljs-string\">\"utf-8\"</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script</span> <span class=\"hljs-attr\">src</span>=<span class=\"hljs-string\">\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\"</span>&gt;</span><span class=\"undefined\"></span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">script</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">head</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">id</span>=<span class=\"hljs-string\">\"app\"</span>&gt;</span>\n 网站名：{{ message }}\n<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">div</span>&gt;</span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script</span>&gt;</span><span class=\"javascript\">\n <span class=\"hljs-keyword\">var</span> app = <span class=\"hljs-keyword\">new</span> Vue({\n   <span class=\"hljs-attr\">el</span>: <span class=\"hljs-string\">'#app'</span>,\n   <span class=\"hljs-attr\">data</span>: {\n     <span class=\"hljs-attr\">message</span>: <span class=\"hljs-string\">\"自如初博客\"</span>\n   }\n })\n</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">script</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">body</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">html</span>&gt;</span>\n\n</code></div></pre>\n",
  codeData3:"<p>这里是markdown编辑的内容</p>\n<ol>\n<li>第一个</li>\n<li>第二个</li>\n<li><strong>第三个</strong></li>\n</ol>\n<pre><div class=\"hljs\"><code class=\"lang-html\"><span class=\"hljs-meta\">&lt;!DOCTYPE html&gt;</span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title</span>&gt;</span>Vue2.x<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">title</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta</span> <span class=\"hljs-attr\">charset</span>=<span class=\"hljs-string\">\"utf-8\"</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script</span> <span class=\"hljs-attr\">src</span>=<span class=\"hljs-string\">\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\"</span>&gt;</span><span class=\"undefined\"></span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">script</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">head</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">id</span>=<span class=\"hljs-string\">\"app\"</span>&gt;</span>\n 网站名：{{ message }}\n<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">div</span>&gt;</span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script</span>&gt;</span><span class=\"javascript\">\n <span class=\"hljs-keyword\">var</span> app = <span class=\"hljs-keyword\">new</span> Vue({\n   <span class=\"hljs-attr\">el</span>: <span class=\"hljs-string\">'#app'</span>,\n   <span class=\"hljs-attr\">data</span>: {\n     <span class=\"hljs-attr\">message</span>: <span class=\"hljs-string\">\"自如初博客\"</span>\n   }\n })\n</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">script</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">body</span>&gt;</span>\n<span class=\"hljs-tag\">&lt;/<span class=\"hljs-name\">html</span>&gt;</span>\n\n</code></div></pre>"
}


export default datas

回显效果：

在这里插入图片描述

有了富文本编辑器的`输入`以及回显`输出`，就可以正式开始博客网站的开发了

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^