您现在的位置是：主页 > news > 天津网站建设推广/世界十大搜索引擎及地址
天津网站建设推广/世界十大搜索引擎及地址
admin2025/5/1 23:03:53【news】
简介天津网站建设推广,世界十大搜索引擎及地址,那种做任务的网站叫什么,网站开发技术试验总结vue使用mavon-editor（markdown）富文本编辑 最近想开发一个自己的博客网站，这个东西的话，难点重点应该都在前端这里。 我能想到的： 1.实现一个markdown的富文本编辑器 2.能够上传图片，输入代码，并…
天津网站建设推广,世界十大搜索引擎及地址,那种做任务的网站叫什么,网站开发技术试验总结vue使用mavon-editor（markdown）富文本编辑 最近想开发一个自己的博客网站，这个东西的话，难点重点应该都在前端这里。 我能想到的： 1.实现一个markdown的富文本编辑器 2.能够上传图片，输入代码，并…有了富文本编辑器的
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, // codetable: 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
回显效果：
