我疯了吗？ （如何）我应该创建一个 jQuery 内容编辑器？

Question

好的，所以我创建了一个主要针对小学的 CMS。它在新西兰变得相当流行，但我非常讨厌的一件事是浏览器所见即所得编辑器的质量很差。我一直在使用KTML（由InterAKT 制作，几年前被Adobe 收购）。在我看来，这个编辑器做了很多很棒的事情（图像编辑/管理、缩略图和非常好的内容编辑）。不幸的是，时间已经对这个产品产生了令人讨厌的影响，新的浏览器开始破坏功能，并且通常会降低这个工具的性能。以一个已经停产的产品为生也很可怕！

我一直在寻找，事实上，我经常四处寻找，看看所见即所得的竞技场中是否有任何变化。我见过的最让我兴奋的东西是 WYSIHAT 框架，但他们决定忽略一个非常相关的编辑范例，我将在下面概述。这是我提议的编辑器的想法，我不知道有任何现有产品可以正确执行此操作：

是的，因此传统的编辑模型（假设 CMS 中的页面）是登录到“后端”并单击页面上的编辑。然后，这将加载另一个屏幕，其中包含编辑器以及其他一些字段。更高级的 CMS 可能会有多个编辑框，用于页面的不同部分。不管怎样，这种做法的一个大问题是，用户正在编辑文档的最终上下文之外的文档。用最简单的术语来说，这意味着页面模板。许多事情都可能是错误的，例如编辑区域的宽度可能与实际模板区域的宽度不同。高度几乎总是固定的，因为现有的编辑器似乎总是使用 IFRAMES 来实现向后兼容性。还有很多其他问题，我相信如果您在这个开发区域，您一定很清楚。

这是我的编辑器乌托邦：

单击“编辑页面”：显示实际页面（及其实际模板）。页面的某些部分已通过类名标记为可编辑。您单击这些区域之一（在我的情况下，它只是模板中间的大“主体”区域），然后一个编辑栏从屏幕顶部下拉，其中包含所有标准控件（粗体、斜体） ，插入图像等...）。从不使用 iframe，而是我们依赖于将相关 DIV 上的 contentEditable 设置为 true。 Firefox 2 和 IE6 可能会消失，让我们继续前进。您可以编辑页面，确切地知道保存页面时它的外观。因为该模板的所有样式都已加载，所以您的标题看起来会正确，一切都会很漂亮。这是一个如此激进的概念吗？为什么我们仍然满足于 TinyMCE 和其他因为听起来像脏话而尴尬而无法使用的编辑器！？

让我们面对事实：

我是一个 JavaScript 新手。我曾经使用 SitePoint 的 Javascript Anthology 作为指南在这个领域进行过尝试。这是一次非常酷的学习体验，但他们当然使用 IFRAME 让他们的生活变得更轻松。我尝试走不同的路线，只使用 contentEditable，甚至尝试避开本机内容编辑例程（execCommand），而是编写我自己的例程。他们有点工作，但总是有问题。

现在我们有了 jQuery 和一些抽象的库，比如 IE 缺乏 Range 支持。我想知道，我是疯了，还是尝试使用 jQuery 和相关插件围绕这个编辑范例构建一个编辑器以使工作变得更容易实际上是个好主意？

我的实际问题：

• 你会从哪里开始？
• 什么插件 你知道这会帮助 最多？
• 是否值得，或者有没有 已经存在的神奇项目 我应该加入吗？
• 创业过程中需要克服的最大障碍是什么 像这样的项目？
• 我疯了吗？

我希望这个问题已发布在正确的板上。我认为这是一个技术问题，因为我想知道需要注意的具体障碍和陷阱，以及当今技术在技术上是否可行。

期待听到人们的想法和意见。

更新

我决定尝试一下，当我有一些很酷的东西可以看时，我会为此启动一个 github 项目。从那时起，我将非常高兴人们提供的任何帮助。当然，它将是开源的:)

更新 2

我已经制定了该项目并概述了目标。如果您想作为贡献者加入项目组，请告诉我，但我会先了解基础知识，以便有一些开始。

链接如下：http://github.com/brendon/SpikeEdit

更新 3

哇！我找到了这个项目。多酷的主意啊！我正在与他联系，看看他是否有任何进展：

http://www.fluffy .co.uk/stediting

更新 4

好吧，我已经走了很远了。最大的问题（就像每个人都知道的那样）是如何保持生成的代码处于合理的状态。 WYSIHAT 似乎已经接受了整个非 IFRAME 的事情，所以我暂缓看看它能走多远。他们采取的方法是在编辑周期结束时清理代码。我认为它应该即时清理，否则你可以让自己陷入泥潭（我已经做过几次了）。当我有时间时，我将研究某种可以插入的同质化引擎，以使编辑过程在所有现代浏览器中表现得尽可能相似。

Answer 1

我完全同意你对编辑器的建议 - 标记和 iframe 都是 2001 年的:) 世界正在走向语义，所以我们需要现代工具来编辑内容。 （请参阅我的幻灯片 http://www.slideshare.net/draftkraft/aloha-editor-contenteditable-useable< /a>) 我或多或少地启动了 Aloha 编辑器 (http://aloha-editor.org)，其意图与您上面的相同。乌托邦 :-) 在我们的例子中或多或少已经成为现实，我们已经有一些使用它的软件：

已知这些软件使用 Aloha Editor 作为主编辑器

• Typo3 （在下一个主要版本 V5 http://latest.phoenix.demo.typo3.org/。很酷的家伙，欧盟巨大的开源 cms。大约 500.000 用户）

• Gentics Content.Node V5（首先了解使用 Aloha 编辑器的大型生产系统。拥有 16,000 个用户的客户。http://gentics.com/Portal.Node/blog-detail/gentics/ posts/company/Telekom-Austria-Group---communication-with-16-000-em.en.html)

这些系统已知有插件

• Drupal（开源 cms https://github.com/evo42/aloha-drupal）

• Midgard （开源cms http://www.midgard-project.org/discussion/developer-forum/ aloha_editor-and_hrungnir_user_interface/)

• 我听说过但我不知道的其他一些项目

我们欢迎任何想要加入、贡献、参与、反馈或任何方式的开发者。我们希望尽可能向所有人开放路线图和开发。欢迎反馈！

Answer 2

好吧，哇！这些人所做的正是我的想法：

http://aloha-editor.com/

我不知道不太喜欢他们的工具栏，但它们的实际功能看起来很棒！我会关注他们的进展:)

Answer 3

这可能会有所帮助。

Joe Armstrong 不久前与您有几乎相同的想法，并花了一周左右的时间尝试将 ContentEditable 与 CouchDB 结合使用以实现持久性。他最终并没有得到一个高度完善的编辑器，但这是一个很好的起点，可以帮助您开发自己的编辑器（如果这就是您想要做的）。看起来将那里的内容放入一个可靠的上下文编辑器中是相当简单的。

作为注释，我同意您的观点，即编辑界面的上下文和布局应尽可能接近他们正在编辑的工件。如果您最终自己推出，请告诉我；我有兴趣为这样的项目做出贡献。

不过，在你出去制作编辑器之前，检查一下你的用户实际上在做什么可能是值得的。在企业 IT 中，十分之九的情况是人们将页面放在 Word 或类似工具中，然后将结果粘贴到您拥有的任何“编辑器”中。我认为这对于 ContentEditable 方法来说效果不太好。顺便说一下，这就是我们仍然使用TinyMCE的原因；它有一个还算不错的“从Word粘贴”按钮。该工具的目标是小学而不是企业环境，因此那里的情况可能会有所不同。

Answer 4

您是否尝试过uEditor？这是一个可靠且简单的 Jquery 解决方案，可将文本区域转换为所见即所得编辑器，

//Grab the content of the editable area then replace it with a textarea like so...

var editableContent = $(selector).html();
$(selector).after("<textarea>" + editableContent + "</textarea>")

// add attributes to text area as desired

// kill the original area:

$(selector).remove();

// call uEditor

$(textareaSelector).uEditor({options});

然后您显然可以向 uEditor 添加选项和事件处理程序。

只是一个想法。
抢

Answer 5

JQuery 确实有很多所见即所得的编辑器，但说实话我对其中的大多数都感到失望。你的建议听起来非常有用。我的做法如下：

首先，对象仅在获得焦点时才获取关键事件。解决这个问题的最佳方法是捕获页面级别的关键事件。然后将正确的字符附加到当前正在编辑的 div 中。这将处理任何 div 中的基本输入，这可能是您想要解决的第一件事。

接下来，您需要一个工具栏，可以通过将显示设置为固定来将其从页面中拉出。您需要一些逻辑来插入跨度等来处理文本的风格化。

当然，如果您自己构建所有这些，您就需要构建所有内容 - 甚至是显示您键入的字符所在位置的闪烁光标。选择文本，将光标插入文本中间，复制粘贴；你几乎必须从头开始构建我们习惯的所有东西。另一种选择是使用某种文本框，但据我了解，您希望避免这种情况。

所以无论如何，我的最终结论是这是可能的，但仍然需要大量工作。不过，似乎人们对此很感兴趣，所以您可能会得到一些帮助。

Answer 6

尝试创建另一个所见即所得编辑器是浪费精力。您必须复制其他编辑器中已有的所有代码，以处理生成正确 HTML 所需的特殊问题、轻松编辑元素、正确管理键盘……

最好使用现有的编辑器正在开发中，首先尝试按原样使用它，确保它处理您的代码并生成您想要的内容，然后学习如何调整其宽度以匹配容器，自动调整其高度以适应其内容，将工具栏放在外部div，你就会得到你想要的。如果您想真正摆脱 iFrame，那么如果他们尚未提供该功能，请继续向他们发送补丁来实现此目的，但这比从头开始创建所有内容要容易得多。

我可以向您保证，有很多人多年来一直在使用这种设置，而无需关心用于编辑的内部元素是什么，包括使网页的任何部分都可以通过触发器（如上下文菜单、双击或浮动按钮。他们只专注于 CMS，并将有关编辑器的详细信息交给专门的团队。

Answer 7

这么多年过去了，我很庆幸我没有自己做！人们已经发现，可以使用 contenteditable 作为 IO 设备来接受输入，然后保持 contenteditable 之外的实际 HTML 干净。我使用的两个利用此方法的项目是：

• Froala Editor
• trix（即将集成到 Ruby on Rails 中）

Froala 无疑是功能更丰富的编辑器，但它们的操作方式相似，带来干净且可预测的标记

Answer 8

如果我理解正确，您非常需要动态可编辑字段（请参阅：facebook、其他 ajaxy-web2.0 网站）。因此，这意味着您只需将（或其他）的类设置为适当的名称，然后让 jquery 将其转换为 onClick 的文本字段/文本区域。我认为 jquery 使用他们的插件之一做了类似的事情。无论如何，您可以对每个字段进行更新（如果您不想编辑整个页面，或者必须更新整个页面/实体才能编辑一个字段）。
当然，这需要一点 ajax 和一些后端工作才能将其结合在一起，但恕我直言，这是相当微不足道的。