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组件主要是实现复制链接和下载文件功能:
- 复制链接:主要是基于navigator.clipboard.writeText实现
- 下载文件：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. 项目源码地址:
点击跳转源码
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/60990.html