代码之家 › 专栏 › 技术社区 › idrosid

javascript富文本编辑器

rich-text-editor rte richtext wysiwyg javascript

31

idrosid · 技术社区 · 16 年前

有几个(非常好的)用javascript编写的富文本Web编辑器(如fckeditor、yui textfeditor和许多其他编辑器)。

但是,我找不到任何关于如何构建这样一个组件的教程。在低级“关键”点上既能解释高级考虑因素(体系结构)又能解释更多细节的东西(例如,为什么大多数编辑器都使用iframe,如何处理键盘输入,如ctrl-b、ctrl-c,当文本被选中时,当文本没有被选中时,等等)

我的主要动机是好奇心;如果我今天必须发展这样一个编辑,我不知道从哪里开始。

是否有人知道任何涉及上述问题的教程(理想情况下,是解释如何从头构建所见即所得编辑器的东西)?

2 回复 | 直到 6 年前

1

39

idrosid 16 年前

经过更多的研究,我发现了以下内容。构建富文本编辑器的功能已经在浏览器中实现。IE是第一个创建这样一个API的,而火狐复制了它。

概述

重点是javascript对象“document”有一个名为designmode的属性,可以设置为“on”。这会将所有页面转换为类似文本区域的组件。假设浏览器打开页面的方式与MS Word相同:用户可以看到格式,但也可以键入页面(通常浏览器以只读方式打开页面)。

window.document.designMode = "On";

因为上面的内容会影响到所有的网页,所以大多数编辑器都使用iframe s,这样可编辑区域就只有iframe,它有自己的文档对象。

除此之外,还有一个API允许简单的javascript访问样式。这是公开的,抛出execcommand()方法。例如,您可以从javascript调用

document.execCommand('bold', false, '');

所选文本将变为粗体。

我发现了以下内容:

一步一步地 guide .

莫扎拉 guide . 它有我找到的最方便的API引用和更多的链接。

2

6

HectorMac 16 年前

利用你的好奇心来激励你在你最喜欢的编辑器中打开源代码并开始探索。因为这些编辑器是用javascript编写的,所以答案是免费的。

我意识到你在寻找更容易消化的东西,但是阅读源代码是非常有益的。

开始构建一个编辑器可能和使用一个现有的开源编辑器并修改它以满足您自己的特殊需求一样简单。