LMLPHP后院

谈谈HTML网页编辑器技术实现技术

maybe yes 发表于 2017-02-09 23:51

前段时间终于把网站的编辑器做的还算有个样子了,至少符合我对编辑器的要求(使用简单,不能产生垃圾节点,能够和网站完美的融合,源码结构符合要求)。最近实在忙,忙的一直没有时间认真的去学点东西,拖到现在才写这篇文章,很多东西又忘记的差不多了。

网站编辑器是非常重要的,重要到直接关系网站的成败。

但目前没有哪一家公司重视过这样一个东西,随随便便找个开源的编辑器就用上了,以致于国内出不了牛逼的新闻媒体公司。大家去看看新浪博客,看看微信网页版经常出现的  ,就一定明白,国内的产品都做的很烂很烂的,当然微信出现空白实体是因为各部门协调不一致造成的,跟编辑器没有关系。

再啰嗦一点,其实 HTML 和 DOM 本身是不太适合做编辑器的,要兼容老的浏览器就非常的困难,于是产生了很多的黑技术。在我看来,兼容老的 IE 系列是没有意义了,但兼容现代浏览器还是很容易的事情。

先谈一谈 Selection

获取 selection 对象非常简单,如下所示:

getSelection();
// or
window.getSelection();

selection 对象有一些属性,对于现代浏览器有四个比较重要的属性,分别是 anchorNode,focusNode,baseNode,extentNode。在一些比较老的浏览器中,也可能出现没有 baseNode 和 extentNode 的。特别注意的是,在 stackoverlow 上竟然有人说 baseNode 是 anchorNode 别名,extentNode 是 focusNode 的别名,其实这种说法是不对的,至少 extentNode 和 focusNode 在很多情况下就不同,这也是我在后面写编辑器时发现的。

  • Selection.anchorNode 选择区域的开始节点
  • Selection.focusNode 选择区域的结束节点
  • rangeCount 选择的区域数量,一般浏览器都是一个,唯独 firefox 可以多个
  • isCollapsed 表示当前选区是否倒塌,倒塌表示是光标状态,其他都是选中状态

Dom 的一些属性需要大量的练习和观察,通过文字很难描述清楚。

Range 对象

range 对象在 modern 浏览器中不能通过 window 对象创建,需要使用 document 对象创建,如下示例:

document.createRange();

range 对象有很多可以设置起始和结束位置的方法,比如 setStart,setEnd,setStartAfter,setStartBefore,setEndBefore,setEndAfter 等。设置好 range 对象后,调用 selection 的 addRange 方法即可实现选区。

selection.removeAllRanges();
selection.addRange(range);

document.execCommand 方法

了解 range 和 selection 对编辑器的操作是有好处的,但是最后发现,在选中后操纵选区中的 DOM 节点变得特别麻烦,比如加粗,加链接等。所以,在编辑选中的内容,还是 execCommand 比较方便,这个方法运行的结果和浏览器的差异比较大,如下所示:

document.execCommand('bold');
document.execCommand('insertHTML',1,'<strong>'+getSelection()+'</strong>');
document.execCommand('insertHTML',1,'<a href="lmlphp.com">lmlphp</a>');

最后发现,也就 insertHTML 方法比较实用了。

相关文章
LMLPHP,可爱滴WEB开发框架

2017-09-24 00:17:43 1506183463 0.006465