前言:
一直想写点能尽可能涵盖多一些Web DOM技巧的开源内容.
机缘巧合,自己纯手撸鼓捣了一个编辑器,目前主要是在线编码方向,富文本样式没整。
本着开源(面试的时候总有人问,你有没有开源的东西),开放原则(我想要gayhub star,求关注,共同学习)。大概简单说一说,关于编辑器的开发。
打一波广告:
本人的编辑器Vue插件版已经发布npm, vue-editor-mar ,有需要的自行跳转
目前支持传入内容,获取文本,配置关键字.
实现思路
- 整体DOM结构借鉴了codemirrow。
- 文本体用<pre><span></span></pre>的格式,组成编辑器文本基本DOM结构。
- 没有使用contenteditble,文本输入用隐藏的textarea控制。
- 光标采用绝对定位,定时刷新样式
- 文本框内的事件基于鼠标mouseup,mouseDown
- 渲染数据结构是JS二维数组
- 内部模糊检索库用lokijs
- 计算定位基于getBoudingData,event信息
大概简单明了,讲这些,有哪些疑问,欢迎骚扰我。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。