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\"><!DOCTYPE html></span>\n<span class=\"hljs-tag\"><<span class=\"hljs-name\">html</span>></span>\n<span class=\"hljs-tag\"><<span class=\"hljs-name\">head</span>></span>\n<span class=\"hljs-tag\"><<span class=\"hljs-name\">title</span>></span>Vue2.x<span class=\"hljs-tag\"></<span class=\"hljs-name\">title</span>></span>\n<span class=\"hljs-tag\"><<span class=\"hljs-name\">meta</span> <span class=\"hljs-attr\">charset</span>=<span class=\"hljs-string\">\"utf-8\"</span>></span>\n<span class=\"hljs-tag\"><<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>></span><span class=\"undefined\"></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">script</span>></span>\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">head</span>></span>\n<span class=\"hljs-tag\"><<span class=\"hljs-name\">body</span>></span>\n<span class=\"hljs-tag\"><<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">id</span>=<span class=\"hljs-string\">\"app\"</span>></span>\n 网站名：{{ message }}\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span>\n\n<span class=\"hljs-tag\"><<span class=\"hljs-name\">script</span>></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\"></<span class=\"hljs-name\">script</span>></span>\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">body</span>></span>\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">html</span>></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\"><!DOCTYPE html></span>\n<span class=\"hljs-tag\"><<span class=\"hljs-name\">html</span>></span>\n<span class=\"hljs-tag\"><<span class=\"hljs-name\">head</span>></span>\n<span class=\"hljs-tag\"><<span class=\"hljs-name\">title</span>></span>Vue2.x<span class=\"hljs-tag\"></<span class=\"hljs-name\">title</span>></span>\n<span class=\"hljs-tag\"><<span class=\"hljs-name\">meta</span> <span class=\"hljs-attr\">charset</span>=<span class=\"hljs-string\">\"utf-8\"</span>></span>\n<span class=\"hljs-tag\"><<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>></span><span class=\"undefined\"></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">script</span>></span>\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">head</span>></span>\n<span class=\"hljs-tag\"><<span class=\"hljs-name\">body</span>></span>\n<span class=\"hljs-tag\"><<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">id</span>=<span class=\"hljs-string\">\"app\"</span>></span>\n 网站名：{{ message }}\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span>\n\n<span class=\"hljs-tag\"><<span class=\"hljs-name\">script</span>></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\"></<span class=\"hljs-name\">script</span>></span>\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">body</span>></span>\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">html</span>></span>\n\n</code></div></pre>"
}
export default datas
回显效果：
有了富文本编辑器的
输入
以及回显
输出
，就可以正式开始博客网站的开发了
输入
输出
版权声明：本文为qq_44706619原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。