8

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

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

4

6 回答 6

9

RTE 通常（总是？）使用 iframe 实现。该 iframe 中可用的文档对象必须将属性designMode 设置为 on。在此之后，为了实现粗体、斜体、颜色、背景等基本功能，您所要做的一切都使用文档对象的 execCommand 方法完成。

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

当你想用那个 RTE 做一些花哨的事情时，事情会变得有点复杂。此时，您必须使用Range 对象（在各种浏览器中实现方式不同）。

于 2009-02-02T15:45:59.187 回答
4

FCKEditor是开源的，源代码是免费的。

Stackoverflow上使用的编辑器的代码也可用

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

于 2009-02-02T14:41:33.140 回答
2

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

于 2009-02-02T14:42:09.473 回答
1

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

这就是它的完成方式。

于 2009-02-02T14:35:00.237 回答
1

更新： 如果你只需要一个编辑器，我建议你使用这里人们给出的任何其他建议。但是，如果您有一些学术目的来构建它，那么以下将是一个跳板。

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

这是一个非常粗略和简单的示例，但它可以帮助您入门。

于 2009-02-02T14:42:12.560 回答
0

大约一年半前，我开始了一个开源“sourceforge”项目来制作富文本编辑器。我从来不知道如何将我的代码放在那里，但是为了开发它，我必须研究“内容可编辑模式”在 IE 和 Firefox 中是如何工作的。我的研究主要包括火狐网站和微软网站。

我看到这样做的代码很丑陋，而且对 OO 不太友好（抱歉，我是一个对象偏执狂，我无能为力），所以需要大量重构才能形成我可以开发的形式并延长。

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

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

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

虽然 TinyMCE 似乎是最好的选择，但它仍然让我头疼，因为粘贴 Word 文档仍然是不可预测的，所见即所得的承诺在 HTML 中实际上是不可能的，但客户期望它，而且一旦开始就会出现许多问题让用户将原始 HTML 放入您的数据库中。（尤其是当您的代码库有部分最后更新于 1993 年时......）

于 2009-02-02T15:31:08.047 回答