在线文本编辑器是如何工作的?

RTE通常(始终?)使用iframe实现。iframe中可用的文档对象必须具有 designMode set to on . 在这一点之后,为了实现粗体、斜体、颜色、背景等基本功能,您所要做的一切都是使用document对象的execCommand方法完成的。

使用iframe的主要原因是,在单击样式按钮时不会失去选择的焦点(Firefox只允许在iframe上设置此属性)。此外,contentEditable属性在Firefox 3之前的版本中不可用。

当你想用RTE做一些新奇的事情时,事情会变得更复杂一些。在这一点上,您必须使用 Range objects (在不同的浏览器中实现方式不同)。

FCKEditor

代码 the editor 用于堆栈溢出 is also available

contenteditable 属性(可以应用于任何HTML标记,但在本例中可能类似于div)。其余的功能通常由访问DOM和操作HTML的Javascript提供。关于预览功能,这可能只是挂接用户编辑元素时引发的事件,然后获取其HTML并使用一些相对简单的Javascript将其显示在页面的其他位置。

(例如:啊,有一个输入文本边框,它与实际显示的部分同步。所以要把字母变成红色,他们只需更改样式)等等。。

更新: 如果你只是需要一个编辑,我建议你使用这里的其他人给出的任何一个建议。但是,如果你有一些学术目的来建立这个,下面将是一个跳板。

这是相当容易做到的(某些部分)。例如,可以使用jQuery快速启动并运行。

div.theScreen {
  width:320px;
  height:75px;
  border:1px solid #CCCCCC;
  background-color:#f1f1f1;
}

<div class="theScreen"></div>
<div><textarea class="typePad"></textarea></div>

现在我们已经准备好了标记和样式,我们可以添加一些简单的Javascript来触发实时预览。

$(document).ready(function(){
  $(".typePad").keyup(function(){
    $(".theScreen").html($(".typePad").val());
  });
});

这是一个非常粗糙和简单的例子,但它会让你开始。

大约一年半前,我启动了一个开源的“sourceforge”项目来制作一个富文本编辑器。我从来没有弄明白如何将我的代码放在上面,但是为了开发它,我必须研究“内容编辑模式”在IE和Firefox中是如何工作的。我的研究主要包括firefox网站和微软网站。

我看到的代码很难看,而且不太面向对象(对不起,我是一个对象偏执狂,我无能为力),所以需要进行大量的重新分解才能形成一个我可以从中开发和扩展的形式。

不幸的是,即使您遵循浏览器的“内容可编辑模式”提供的功能,最终仍然会遇到一个充满bug的编辑器。原因是“内容可编辑模式”与从MS Word粘贴(每个人都会尝试)或创建编号列表不一致,并且它生成的标记将不一致且格式不正确。

TinyMCE . TinyMCE充满了我个人本可以避免的设计决策,但它们修复了您在尝试制作自己的编辑器时会遇到的大多数错误。它还具有许多功能,可以让您根据自己的需要进行定制。

我不能推荐其他东西,因为我还没有真正尝试过其他的选择。