当前位置：文江博客话题详情

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

发布于 2024-07-13 00:03:32 字数 131 浏览 10 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

溇涏 2024-07-20 00:03:32

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

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

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

回复收藏 0 原文

昇り龍 2024-07-20 00:03:32

FCKEditor 是开源的，源代码可免费获取。

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

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

回复收藏 0 原文

ぺ禁宫浮华殁 2024-07-20 00:03:32

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

回复收藏 0 原文

那小子欠揍 2024-07-20 00:03:32

（例如：啊，有一个无边框的输入文本，与实际显示的部分同步。因此，要将字母变为红色，他们只需更改样式）等等。

这就是它的完成方式。

回复收藏 0 原文

只为守护你 2024-07-20 00:03:32

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

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

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

Update: If you just need an editor, I suggest you use any one of the other suggestions people here have given. But if you have some academic purpose for building this, the following will be a springboard.

This is accomplished rather easily (some parts). For example, you could use jQuery to get up and running real quick.

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

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

Now that we have markup and styles in place, we can add some simple Javascript to trigger real-time previews.

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

This is a very crude and simple example, but it will get you started.

回复收藏 0 原文

一束光，穿透我孤独的魂 2024-07-20 00:03:32

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

我看到的执行此操作的代码很丑陋，而且对 OO 不太友好（抱歉，我是一个对象偏执者，我无能为力），因此需要进行大量重构才能形成我可以开发的形式并延伸。

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

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

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

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

回复收藏 0 原文

~没有更多了~