开发了一个Web编辑器,目前是Vue版

javascript/jquery

浏览数:271

2020-6-16

前言:

一直想写点能尽可能涵盖多一些Web DOM技巧的开源内容.
机缘巧合,自己纯手撸鼓捣了一个编辑器,目前主要是在线编码方向,富文本样式没整。
本着开源(面试的时候总有人问,你有没有开源的东西),开放原则(我想要gayhub star,求关注,共同学习)。大概简单说一说,关于编辑器的开发。

打一波广告:

本人的编辑器Vue插件版已经发布npm, vue-editor-mar ,有需要的自行跳转

目前支持传入内容,获取文本,配置关键字.

实现思路

  • 整体DOM结构借鉴了codemirrow。
  • 文本体用<pre><span></span></pre>的格式,组成编辑器文本基本DOM结构。
  • 没有使用contenteditble,文本输入用隐藏的textarea控制。
  • 光标采用绝对定位,定时刷新样式
  • 文本框内的事件基于鼠标mouseup,mouseDown
  • 渲染数据结构是JS二维数组
  • 内部模糊检索库用lokijs
  • 计算定位基于getBoudingData,event信息

大概简单明了,讲这些,有哪些疑问,欢迎骚扰我。

作者:mazhiwen