1.背景

由于知识库的一些.md格式的文件的文件内容可能会有变动，如果频繁下载修改后，再进行上传，会让用户操作不方便，为此接入md在线编辑功能

2 md在线编辑具体实现

2.1 搭建项目

搭建项目下载和引入bytemd和fflate相关依赖，再main.js引入bytemd相关样式

npm i bytemd fflate - d

main.js

//引入bytemd样式
import 'bytemd/dist/index.css'

2.2 整个页面分为上下两部分，分别为header和repl组件组成

2.2.1 header组件的实现:

header组件主要是实现复制链接和下载文件功能:

1. 复制链接:主要是基于navigator.clipboard.writeText实现
2. 下载文件：demo中只做一个相应的提示即可

代码具体实现：

2.2.2 repl组件的实现

repl组件分为两部分，左边是编辑区域（Editor组件），右侧是预览区域（Viewer组件）
–1.repl组件初始化或者刷新的时候，取url拼接的值进行展示
–2. 监听到编辑器值的变化，则把变化后的值进行加密后展示在url上
代码具体实现：

2.2.3 Editor组件的实现

基于bytemd编辑器，
–1. 监听传入值的变化，如果有变化，则过滤传入为undefined的配置项，按照最新配置展示编辑器
–2.监听编辑内容的变化，如果有变化，则重新赋值，并且透传出去

2.2.4 Viewer组件的实现

展示组件的实现
1.如果点击展示组件，判断是否有a标签，如果有a标签，且有符合要求的href属性，则执行相应的操作。
2.当监听到相应值的变化，则进行更新操作

2.2.5 工具类的实现

2.3 运行效果

3. 项目源码地址:

点击跳转源码