当前位置：首页 > news >正文

前端Vue2项目使用md编辑器

news 2025/7/12 19:41:42

项目中有一个需求，要在前端给用户展示内容，内容有 AI 生成的，返回来的是 md 格式，所以需要给用户展示 md 格式，并且管理端也可以编辑这个 md 格式的文档。

使用组件库 v-md-editor。

https://code-farmer-i.github.io/vue-markdown-editor/zh/examples/base-editor.html#%E5%BC%95%E5%85%A5

使用npm 命令进行安装 
# 使用 npm  npm i @kangc/v-md-editor -S

对于用户端需要展示出来，管理端需要编辑，官方给的全局组件是用来编辑的。我使用局部注册的来管理。

在 main.js 中导入编辑和预览组件，使用 Vue.use（）进行全局的注册。

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falseimport VMdEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';import '@kangc/v-md-editor/lib/theme/style/github.css';
import hljs from 'highlight.js';// highlightjsVMdEditor.use(githubTheme, {Hljs: hljs,
});
VMdPreview.use(githubTheme, {Hljs: hljs,
});
Vue.use(VMdEditor);
Vue.use(VMdPreview);import router from './router'; // 导入路由配置
new Vue({router,render: h => h(App),
}).$mount('#app')

editView

<script>export default {data() {return {markdown: ``,};}
};
</script><template><div><v-md-editor v-model="markdown" height="400px" width="400px"></v-md-editor></div>
</template><style scoped>
/* 组件样式 */
</style>
//通过 v-model 进行双向的绑定

注意注册的组件时机选择应该是 created()，不太清楚为什么。官方也没有给说明文档。

showView

<template><div><v-md-preview :text="markdown"></v-md-preview></div>
</template><script>
// 只在本组件内引入需要的模块
export default {data() {return {markdown: `# 我的 Markdown 示例## 介绍Markdown 是一种轻量级标记语言，常用于编写格式化文本，常见应用包括文档编写、博客、GitHub 上的 README 文件等。## 示例代码\`\`\`python
def add(a, b):return a + bresult = add(3, 5)
print("结果是:", result)
\`\`\``};}
};
</script><style scoped>
/* 组件样式 */
</style>实际的markdown 可以由后端的接口进行返回

编辑界面

编写使用 markdown 语法，右边显示初对应的内容。