跳到主要内容

文档管理平台

文档管理平台 doc-manage-platform

场景：包括技术文档，接口文档、需求文档、个人笔记、写作网站

markdown编辑器

参考项目：

bytemd编辑器使用​

bytemd是字节开发的一款富文本编辑器，功能强大，而且支持很多掘金内置的主题，可用于vue,react，

  • 主题可以使用juejin-markdown-themes，虽然名叫juejin，其它里边有很多风格的css选择,
    • 直接引入@import 'juejin-markdown-themes/dist/juejin.min.css' 即可

引入主题样式之后，会显示和掘金一样的主题，有显示目录、预览等功能

如何自定义工具栏​

  • 定义一个插件，使用actions

显示目录和定位​

参考：https://juejin.cn/post/7055451634561712158

左边区域树​

  • 右键自定义菜单实现节点增删改

参考：https://blog.csdn.net/Luo_LA/article/details/122470744

文档管理

  • js
  • html
  • css

渲染markdown内容​

如何生成锚点目录树​

参考：https://blog.csdn.net/plumbiu/article/details/126573568

可以使用marked, 而不是markdown-it, 因为markdown-it无法渲染内容过长的md文件内容

如何生成一个markdown 目录？

1、makdown中的#，##，##组成的标题经过marked等工具转化渲染到网页中会成变成h标签，所以当拿到文章详情页后可以从中抽离出所有的目录标签即h1，h2，h3....

2、拿到这些标题之后就可以进行锚点的设置

①：设置一个锚点链接 <a href="#test">test</a>（注意：href属性的属性值最前面要加#）

②：在页面中需要的位置设置锚点<h1 id="test"></h1>（注意：a标签中要写一个id属性，属性值要与①中的href的属性值一样，不加#）

如何通过文本字符串来生成markdown内容​

参考：https://learnku.com/articles/51188

通过文章接口渲染 Markdown 格式的内容

  • 通过第三方库，将Markdown 转换为 HTML

    • marked库

    • bytemd

      • 编辑就是editor预览就是viewer，编辑的时候你使用editor，存储md数据到数据库，使用viewer渲染你存储的md文件

markdown编辑器功能​

使用了markdown编辑器，基于第三方库实现，内置了很多功能

  • 支持所见即所得编辑模式

需求​

1、markdown内容，保存到数据库，

2、获取每个用户下所有文章

3、根据文章进行分类，进行树形结构

创建"users"的表、"articles"的表、"categories"的表

4、文档模式 【阅读, 编辑、发布】

5、登录/注册

6、文章分类

7、如何把文章保存到数据库？

后端需求​

  • 登录/注册

  • 发布接口

  • 目录树接口

    • 新增/修改/删除

发布接口​

数据库​

创建文章表​

参考：【markdown内容 用text使用文本类型来存储】

sql
CREATE TABLE `articles` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL DEFAULT '',
  `content` text NOT NULL,
  `created_at` datetime NOT NULL,
  `updated_at` datetime NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
  • id: 文章的唯一标识符，使用自增长整数类型。
  • title: 文章的标题，使用字符串类型。
  • content: 文章的正文内容，使用文本类型。
  • created_at: 文章创建时间，使用日期时间类型。
  • updated_at: 文章更新时间，使用日期时间类型。

遇到问题​

1、url参数中文乱码 【文件目录会存在中文】，导致无法跳转路由

  • 可通过 encodeURIComponent/decodeURIComponent 来进行编码和解码

路由跳转的时候，通过 encodeURIComponent编码

在接受参数的时候，通过decodeURIComponent解码

js
const path = decodeURIComponent(path) // path可能为中文，进行编码
router.push(path)
const fullPath = decodeURIComponent(useRoute().fullPath)  // 解码

2、当用户存在文档目录时候，默认显示第一个目录下第一个文件

关键技术分析​

参考系列​

编辑器参考：