好的，所以我创建了一个主要针对小学的CMS。它在新西兰相当受欢迎，但我讨厌的一件事就是浏览器WYSIWYG编辑的质量很差。我一直在使用KTML（几年前由Adobe收购的InterAKT制造）。在我看来，这个编辑器做了很多很棒的事情（图像编辑/管理，缩略图和非常好的内容编辑）。不幸的是，时间已经有了这个产品的讨厌方式，新的浏览器开始破坏功能，并且通常会降低此工具的性能。基于已经废弃的产品，我的生计也是非常可怕的！
我一直在打猎，事实上我经常在周围寻找，看看WYSIWYG竞技场是否有任何变化。我见过的最让我兴奋的是WYSIHAT框架，但他们决定忽略一个非常相关的编辑范例，我将在下面概述。这是我提议的编辑器的想法，我不知道任何可以正确执行此操作的现有产品：
是的，所以传统的编辑模型让我们说CMS中的一个页面就是登录“后端”并点击页面上的编辑。然后，这将加载另一个屏幕，其中包含编辑器以及其他一些字段。更高级的CMS可能会有几个编辑框，用于页面的不同部分。无论如何，这种做事方式的一个大问题是用户正在编辑一个文档，而不是它将出现的最终上下文。最简单的说，这意味着页面模板。许多事情可能是错的，例如编辑区域的with可能与实际模板区域的宽度不同。高度几乎总是固定的，因为现有的编辑器似乎总是使用IFRAMES来实现向后兼容。还有很多其他的牛肉，如果你在这个开发区，我相信你很清楚。
这是我的编辑乌托邦：
单击“编辑页面”：显示实际页面（及其实际模板）。页面的某些部分已通过类名标记为可编辑。你点击其中一个区域（在我的情况下，它只是模板中间的大'主体'区域），编辑栏从屏幕顶部用所有标准控件下拉（粗体，斜体） ，插入图像等...）。从不使用iframe，而是依赖于在有问题的DIV上将contentEditable设置为true。 Firefox 2和IE6可以消失，让我们继续前进。您可以编辑页面，确切地知道保存时的外观。因为加载了此模板的所有样式，所以您的标题看起来是正确的，所有内容都只是花花公子。这是一个如此激进的概念吗？为什么我们仍然满足于TinyMCE以及其他使用起来太尴尬的编辑器，因为它听起来像一个脏话！？
让我们面对事实：
我是一个JavaScript新手。我曾经使用SitePoint的Javascript Anthology作为指南在这个区域玩过。这是一个非常酷的学习经历，但他们当然使用IFRAME让他们的生活更轻松。我尝试使用不同的路径，只使用contentEditable，甚至尝试回避本机内容编辑例程（execCommand），而是编写自己的。他们有点工作，但总有问题。
现在我们有了jQuery，还有一些库可以抽象IE缺乏Range支持。我想知道，我是疯了，还是尝试使用jQuery和相关插件围绕这个编辑范例构建编辑器以使工作更轻松实际上是一个好主意？
我的实际问题：
我希望这个问题已经发布在正确的董事会上。我认为这是一个技术问题，因为我想知道需要注意的具体障碍和缺陷，以及技术上是否可行的当今技术。
期待听到人们的想法和意见。
UPDATE
我已经决定我会参与其中，并且当我有一些很酷的东西可以看时，它会启动一个github项目。从那里我会非常高兴为人们提供任何帮助。它当然是开源的:)
更新2
我已经完成了这个项目并概述了目标。如果您想加入项目组作为贡献者，请告诉我，但我会先了解基础知识，这样就可以开始了。
这是链接：http://github.com/brendon/SpikeEdit
更新3
哇！我找到了这个项目。多么酷的主意！我正和他取得联系，看看他是否随处可见：
http://www.fluffy.co.uk/stediting
更新4
好的，我得到了相当远的距离。最大的问题（就像每个人都知道的那样）是如何在合理的事态中保持代码生成。 WYSIHAT似乎已经接受了整个非IFRAME的事情，所以我不想看看它会走多远。他们采用的方法是在编辑周期结束时清理代码。我认为它应该在运行中清理，否则你可以编辑自己陷入泥潭（我已经完成了几次）。当我有时间的时候，我会调查某种可以插入的均匀化引擎，使编辑过程在所有现代浏览器中尽可能地表现得相似。
我完全赞同你对编辑器的建议 - 标记和iframe是如此2001年:)世界正在引领语义，所以我们需要现代工具来编辑内容。 （参见我的幻灯片http://www.slideshare.net/draftkraft/aloha-editor-contenteditable-useable）我或多或少地开始了Aloha编辑（http://aloha-editor.org），其背后的内涵与你的相同。乌托邦:-)在我们的案例中或多或少变得现实，我们已经有一些使用它的软件：
众所周知，使用Aloha Editor作为主编辑
已知这些系统具有插件
我们欢迎任何开发者如何加入，贡献，参与，反馈或其他什么。我们希望为每个人保持路线图和开发尽可能开放。欢迎反馈！
好的，哇！这些人正在做我正在考虑的事情：
我不喜欢他们的工具栏，但他们的实际功能看起来很棒！我会留意他们的进步:)
https://github.com/evo42/aloha-drupal。
Joe Armstrong与你刚才的想法几乎相同，花了一个星期左右的时间玩ContentEditable与CouchDB搭配持久。他并没有最终得到一个高度优秀的编辑器，但这是一个很好的起点来推动自己（如果那是你想做的）。看起来很简单，把它放在那里并将它变成一个可靠的上下文编辑器。
作为一个注释，我同意你的观点，即编辑界面应该尽可能地与他们正在编辑的工件的上下文和布局相近。如果你最终滚动自己，请告诉我。我有兴趣为这样的项目做贡献。
在你出去编写一个编辑器之前，查看你的用户实际在做什么可能是值得的。在企业IT中，十分之九，你会看到人们将他们的页面放在Word或某些东西中，然后将结果粘贴到你拥有的任何“编辑器”中。我不认为这对ContentEditable方法有效。顺便说一下，这就是我们仍然使用TinyMCE的原因;它有一个中等体面的“从Word粘贴”按钮。你在小学而不是企业环境中瞄准这个工具，所以事情可能会有所不同。
你试过http://www.midgard-project.org/discussion/developer-forum/aloha_editor-and_hrungnir_user_interface/吗？这是一个坚实而简单的Jquery解决方案，可以将textarea变成WYSIWYG编辑器
http://aloha-editor.com/
您显然会向uEditor添加选项和事件处理程序。
只是一个想法。抢
JQuery确实有很多所见即所得的编辑器，但说实话，我对它们中的大多数都很失望。你的建议听起来非常有用。这是我如何做到的：
首先，对象仅在具有焦点时才获取关键事件。解决此问题的最佳方法是在页面级别捕获关键事件。然后将正确的字符附加到当前正在编辑的div。这将处理任何div的基本输入，这可能是你想要解决的第一件事。
接下来，您需要一个工具栏，通过将显示设置为固定，可能会将其拉出页面。您需要一些逻辑来插入跨度，以便处理样式化文本。
当然，如果你自己构建所有这些，你需要构建所有东西 - 甚至是闪烁的光标，显示你输入的字符的位置。选择文本，将光标插入文本中间，复制并粘贴;你几乎必须构建我们用来从头开始的所有东西。另一种选择是使用某种文本框，但据我所知，你想避免这种情况。
所以无论如何，我的最终判决是它的可能性，但它仍然需要做很多工作。看起来对它有很大的兴趣，所以你可能会得到一些帮助。
尝试创建另一个WYSIWYG编辑器是浪费精力。您必须复制其他编辑器中已有的所有代码，以处理生成正确HTML所需的特殊问题，使编辑元素变得容易，正确管理键盘......
最好使用它正在开发中的现有产品，并首先尝试按原样使用它，确保它处理您的代码并生成您想要的内容，然后学习如何调整其宽度以匹配容器，自动调整其高度它的内容，将工具栏放在外部div中，你就可以得到你想要的东西。如果你想真正摆脱iFrame，那么请继续向他们发送补丁，如果他们还没有提供这种能力，那么这比从头开始创建一切要容易得多。
我可以向你保证，有很多人已经使用这种设置好几年了，而不需要关心用于编辑的内部元素是什么，包括使网页的任何部分可以通过类似的触发器编辑上下文菜单，双击或浮动按钮。他们只关注CMS，并将编辑器的详细信息发送给专门的团队。
这些年后，我很高兴我没有自己做！人们已经发现可以使用This may help作为IO设备来接受输入，然后将实际的HTML保持在uEditor之外。我使用这个方法的两个项目是：
//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});
contenteditable（很快将被整合到Ruby on Rails中）Froala是功能更丰富的编辑器，但它们都以类似的方式运行，从而实现清晰且可预测的标记
如果我理解正确，你几乎想要动态可编辑的字段（参见：facebook，其他ajaxy-web2.0网站）。因此，这意味着您只需将（或其他）的类设置为适当的名称，并将jquery转换为textfield / textarea onClick。我认为jquery使用其中一个插件做了类似的事情。无论如何，那么你可以进行每个字段的更新（如果你不想编辑整个页面，或者必须更新整个页面/实体来编辑一个字段）。 当然，这需要一点点ajax和一些后端工作来将它联系在一起，但这是非常微不足道的imho。