文章目录
- 思路
- 体验地址 [https://hongbin.xyz/admin#/md](https://hongbin.xyz/admin#/md)
- 效果
- 加粗/斜体等
- 粘贴图片上传
- 拖拽图片上传
- 添加列表/代办/表格
- 添加 代码片段
- 同步滚动 + toc目录
思路
使用 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; }
代码仓库 https://gitee.com/honbingitee/hongbin_xyz_admin.git markdown 路径 src/pages/md.tsx
体验地址 https://hongbin.xyz/admin#/md
效果
加粗/斜体等
粘贴图片上传
拖拽图片上传
添加列表/代办/表格
添加 代码片段
同步滚动 + toc目录
