react实现markdown编辑器

article/2025/11/2 23:05:50

文章目录

- - 思路
  - 体验地址 [https://hongbin.xyz/admin#/md](https://hongbin.xyz/admin#/md)
  - 效果
  - - 加粗/斜体等
    - 粘贴图片上传
    - 拖拽图片上传
    - 添加列表/代办/表格
    - 添加代码片段
    - 同步滚动 + toc目录

功能如下

上传图片包括点击上传拖拽上传粘贴图片上传
点击nav button添加语法块自动在编辑器设置插入点
支持选中文字点击按钮加入加粗/斜体等样式
@[toc]添加目录
TODO 快捷键监听

思路

使用 Selection 和 Range API 实现获取鼠标选中区域内容以及改变选中区域元素实现大部分文字操作功能
如加粗就是在选中的区域两侧加入 ** **
代码示例

const selObj = window.getSelection();
const range = selObj.getRangeAt(0);
const prev = range.toString(); //获得选中文字
range.deleteContents(); //删除选中的区域
const span = document.createElement("span");//创建span
range.surroundContents(span); //span插入到被删除的区域
span.innerHTML = `${str}${prev}${str}`;//设置 新的内容
```
据此可实现大部分功能 
添加代码前端等添加多行语法则是添加多个div实现
```
range.deleteContents();
const wrap = document.createElement("div");
range.surroundContents(wrap);
for (const str of ["```js", "<br/>", "```"]) {const item = document.createElement("div");wrap.appendChild(item);item.innerHTML = str;
}