Question

我正在尝试开发一个在线编辑器（如FCKEditor / etc），但我不知道它们是如何工作的。我知道WYSIWYG的有Javascript和IFrame，但它们实际上是如何工作的？

我特别好奇能够实时预览编辑器中输入的内容。

Answer 1

RTE通常（总是？）使用iframe实现。 iframe内部可用的文档对象必须具有属性designMode set to on。在此之后，您需要做的就是使用文档对象的execCommand方法来实现粗体，斜体，颜色，背景等基本功能。

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

当你想用RTE做一些奇特的事情时，事情会变得复杂一些。此时，您必须使用Range objects（在各种浏览器中以不同方式实现）。

Answer 2

FCKEditor是开源的，源代码可以免费使用。

Stackoverflow上使用的the editor代码is also available

可能值得花一些时间阅读源代码。这里的人们很乐意帮助解释任何不清楚的代码。

Answer 3

我认为WYSIWYG编辑器的关键是contenteditable属性（可以应用于任何HTML标记，但在这种情况下可能类似于div）。其余功能通常由访问DOM和操作HTML的Javascript提供。关于预览功能，这可能只是挂钩用户编辑元素时引发的事件，然后使用一些相对简单的Javascript获取HTML并在页面的其他位置显示它。

Answer 4

（例如：啊，有一个输入文本无边框，与实际显示的部分同步。所以把字母换成红色只是改变风格）等等。

就是这样做的。

Answer 5

更新： 如果您只需要一位编辑，我建议您使用此处提供的其他任何建议。但是如果你有一些学术目的来构建这个，那么下面将是一个跳板。

这很容易完成（某些部分）。例如，您可以使用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());
  });
});

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

Answer 6

我在一年半前创建了一个开源的“sourceforge”项目来创建一个富文本编辑器。我从来没有想过如何在那里获取我的代码，但是为了开发它我必须研究“内容可编辑模式”如何在IE和Firefox中工作。我的研究主要包括firefox网站和微软网站。

我看到这样做的代码是丑陋的，并不是非常友好（对不起，我是一个对象偏见我无法帮助它）所以需要进行大量的重新考虑才能进入我的形式可以发展和扩展。

不幸的是，即使您遵循浏览器的“内容可编辑模式”提供的功能，您仍然会得到一个充满错误的编辑器。原因是“内容可编辑模式”与从MS Word粘贴（每个人都尝试这个）或创建编号列表不一致，并且它生成的标记将不一致且形成不良。

这就是我现在使用TinyMCE的原因。 TinyMCE充满了我个人本可以避免的设计决策，但他们已经修复了在尝试制作自己的编辑器时会遇到的大部分错误。它还具有许多功能，可以根据您的需要进行自定义。

我不能推荐任何其他东西，因为我还没有真正尝试过替代方案。

虽然TinyMCE似乎是最好的选择，但我仍然很头疼，因为粘贴Word文档仍然无法预测，所见即所得的承诺在HTML中是不可能的，但客户期望它，并且有许多问题蔓延一旦开始让用户将原始HTML放入数据库中。（特别是当您的代码库在1993年更新了部件时......）

在线文本编辑器如何工作？

6 个答案: