前端Vue2项目使用md编辑器

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

使用组件库 v-md-editor。

https://code-farmer-i.github.io/vue-markdown-editor/zh/examples/base-editor.html#引入

plain 复制代码
使用npm 命令进行安装 
# 使用 npm  npm i @kangc/v-md-editor -S

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

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

javascript 复制代码
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

import 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';

// highlightjs


VMdEditor.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

plain 复制代码
<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

plain 复制代码
<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 + b

result = add(3, 5)
print("结果是:", result)
\`\`\`
      `
    };
  }
};
</script>

<style scoped>
/* 组件样式 */
</style>

实际的markdown 可以由后端的接口进行返回

编辑界面

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

展示界面

这个是一个简单的版本,后面对于内容要保存到数据库中,要看官方文档,还有图片等上传。

相关推荐
带娃的IT创业者2 小时前
TypeScript + React + Ant Design 前端架构入门:搭建一个 Flask 个人博客前端
前端·react.js·typescript
非凡ghost3 小时前
MPC-BE视频播放器(强大视频播放器) 中文绿色版
前端·windows·音视频·软件需求
Stanford_11063 小时前
React前端框架有哪些?
前端·微信小程序·前端框架·微信公众平台·twitter·微信开放平台
洛可可白3 小时前
把 Vue2 项目“黑盒”嵌进 Vue3:qiankun 微前端实战笔记
前端·vue.js·笔记
学习同学4 小时前
从0到1制作一个go语言游戏服务器(二)web服务搭建
服务器·前端·golang
-D调定义之崽崽4 小时前
【初学】调试 MCP Server
前端·mcp
四月_h4 小时前
vue2动态实现多Y轴echarts图表,及节点点击事件
前端·javascript·vue.js·echarts
文心快码BaiduComate4 小时前
用Zulu轻松搭建国庆旅行4行诗网站
前端·javascript·后端
许商5 小时前
【stm32】cmake构建vscode开发环境
ide·vscode·编辑器
行者..................6 小时前
手动编译 OpenCV 4.1.0 源码,生成 ARM64 动态库 (.so),然后在 Petalinux 中打包使用。
前端·webpack·node.js