我疯了吗?(如何)我应该创建一个jQuery内容编辑器?

Bre*_*uir 32 jquery wysiwyg editor

好的,所以我创建了一个主要针对小学的CMS.它在新西兰相当受欢迎,但我讨厌的一件事就是浏览器WYSIWYG编辑的质量很差.我一直在使用KTML(几年前由Adobe收购的InterAKT制造).在我看来,这个编辑器做了很多很棒的事情(图像编辑/管理,缩略图和非常好的内容编辑).不幸的是,时间已经有了这个产品的讨厌方式,新的浏览器开始破坏功能,并且通常会降低此工具的性能.基于已经废弃的产品,我的生计也是非常可怕的!

我一直在打猎,事实上我经常在周围寻找,看看WYSIWYG竞技场是否有任何变化.我见过的最让我兴奋的是WYSIHAT框架,但他们决定忽略一个非常相关的编辑范例,我将在下面概述.这是我提议的编辑器的想法,我不知道任何可以正确执行此操作的现有产品:

是的,所以传统的编辑模型让我们说CMS中的一个页面就是登录"后端"并点击页面上的编辑.然后,这将加载另一个屏幕,其中包含编辑器以及其他一些字段.更高级的CMS可能会有几个编辑框,用于页面的不同部分.无论如何,这种做事方式的一个大问题是用户正在编辑一个文档,而不是它将出现的最终上下文.最简单的说,这意味着页面模板.许多事情可能是错误的,例如,编辑区域的可能与实际模板区域的宽度不同.高度几乎总是固定的,因为现有的编辑器似乎总是使用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的事情,所以我不想看看它会走多远.他们采用的方法是在编辑周期结束时清理代码.我认为它应该在运行中清理,否则你可以编辑自己陷入泥潭(我已经完成了几次).当我有时间的时候,我会调查某种可以插入的均匀化引擎,使编辑过程在所有现代浏览器中尽可能地表现得相似.

Hay*_*ran 6

我完全赞同你对编辑器的建议 - 标记和iframe是如此2001年:)世界正在引领语义,所以我们需要现代工具来编辑内容.(请参阅我的幻灯片http://www.slideshare.net/draftkraft/aloha-editor-contenteditable-useable)我或多或少地启动了Aloha编辑器(http://aloha-editor.org),其内涵与您的相同背后.乌托邦:-)在我们的案例中或多或少变得现实,我们已经有一些使用它的软件:

众所周知,使用Aloha Editor作为主编辑

已知这些系统具有插件

我们欢迎任何开发者如何加入,贡献,参与,反馈或其他什么.我们希望为每个人保持路线图和开发尽可能开放.欢迎反馈!


Bre*_*uir 5

好的,哇!这些人正在做我正在考虑的事情:

http://aloha-editor.com/

我不喜欢他们的工具栏,但他们的实际功能看起来很棒!我会留意他们的进步:)


Bre*_*uir 0

这么多年过去了,我很庆幸我没有自己做!人们已经发现可以将其contenteditable用作 IO 设备来接受输入,然后在contenteditable. 我使用的两个使用此方法的项目是:

Froala 无疑是功能更丰富的编辑器,但它们的操作方式相似,从而产生干净且可预测的标记