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

2020/12/31 14:11 · jquery ·  · 0评论

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

我一直在打猎,实际上我经常打猎以查看所见即所得的竞技场是否发生了任何变化。我所看到的最令我兴奋的是WYSIHAT框架,但是他们决定忽略一个非常相关的编辑范例,我将在下面概述。这是我建议的编辑器的主意,我不知道任何现有的产品都可以正确地做到这一点:

是的,因此,传统的编辑模型假设CMS中的页面是登录到“后端”并在页面上单击“编辑”。然后,将加载另一个屏幕,其中包含编辑器以及其他一些字段。更高级的CMS可能会有几个编辑框,分别用于页面的不同部分。无论如何,这种处理方式的最大问题是用户正在编辑文档的最终上下文之外。最简单的说,这就是页面模板。许多事情可能是错误的,例如,编辑区域的和可能与实际模板区域的宽度不同。高度几乎总是固定的,因为现有的编辑器似乎总是使用IFRAMES来实现向后兼容。还有很多其他牛肉,我敢肯定,如果您

这是我的编辑乌托邦:

您单击“编辑页面”:显示实际页面(及其实际模板)。页面的某些部分已通过类名称标记为可编辑。您单击这些区域之一(在我的情况下,这只是模板中间的大“ body”区域),并且带有所有标准控件(粗体,斜体)的编辑栏从屏幕顶部下拉下来,插入图片等...)。从未使用过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事务,所以我暂缓进行看看。他们采取的方法只是在编辑周期结束时清理代码。我认为应该即时对其进行清理,否则您可以将自己编辑成泥潭(我已经做过几次)。有空的时候,我将研究可以插入的某种同质化引擎,以使编辑过程在所有现代浏览器中表现得尽可能相似。

我完全同意您对编辑器的建议-标记和iframe是如此2001 :)世界正朝着语义学前进,因此我们需要现代工具来编辑内容。(请参阅我的幻灯片http://www.slideshare.net/draftkraft/aloha-editor-contenteditable-useable)我或多或少以与上述相同的意图启动了Aloha编辑器(http://aloha-editor.org)。背后。在我们的案例中,乌托邦:-)或多或少成为现实,我们已经有一些软件在使用它:

这些被称为使用Aloha Editor作为主编辑器

这些系统已知具有插件

我们欢迎任何想要加入,贡献,参与,反馈或其他方式的开发人员。我们希望对所有人保持开放的路线图和发展。欢迎反馈!

好吧,哇!这些家伙完全按照我的想法做:

http://aloha-editor.com/

我不太喜欢他们的工具栏,但它们的实际功能看起来很棒!我会一直关注他们的进展:)

这可能会有所帮助

乔·阿姆斯特朗(Joe Armstrong)不久前与您的想法几乎相同,花了大约一周的时间与ContentEditable和CouchDB配对以保持持久性。他最终并没有一个高度精打细算的编辑器,但这是滚动您自己的编辑器的一个很好的起点(如果您要这样做的话)。将其中的内容带入可靠的上下文编辑器中似乎很简单。

需要注意的是,我同意您的观点,即编辑界面在上下文和布局上应尽可能接近要编辑的工件。让我知道您是否最终会自己滚动;我会对为这样的项目做出贡献感兴趣。

不过,在您出去制作编辑器之前,可能需要检查用户的实际操作。在公司IT中,您将看到的十分之九是人们将页面放在Word或类似的东西中,然后将结果粘贴到您拥有的任何“编辑器”中。我认为ContentEditable方法不能很好地工作。顺便说一句,这就是为什么我们仍然使用TinyMCE的原因。它有一个中途的“从Word粘贴”按钮。您将工具瞄准的是小学而不是企业环境,因此那里的情况可能有所不同。

您是否尝试过uEditor这是一个简单可靠的Jquery解决方案,可将textarea转换为WYSIWYG编辑器

//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添加选项和事件处理程序。

只是一个想法。

JQuery确实有很多WYSIWYG编辑器,但是老实说,我对大多数编辑器感到失望。您的建议听起来很有用。这是我的处理方式:

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

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

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

因此,无论如何,我的最终结论是可能,但是仍然需要大量工作。似乎对它有很多兴趣,因此您可能会得到一些帮助。

尝试创建另一个“所见即所得”编辑器是浪费时间。您必须复制其他编辑器中已经可用的所有代码,以处理生成正确的HTML,简化元素编辑,正确管理键盘所需的特殊问题。

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

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

这些年来,我很高兴自己没有自己做!人们已经发现,可以contenteditable用作IO设备来接受输入,然后将实际HTML保持在外部contenteditable我使用的两个利用此方法的项目是:

Froala到目前为止是功能更丰富的编辑器,但它们的操作方式相似,从而产生清晰可预测的标记

如果我理解正确,那么您几乎想要动态可编辑的字段(请参阅:facebook,其他ajaxy-web2.0网站)。因此,这意味着您只需将(或其他)的类设置为适当的名称,并让jquery将其转换为textfield / textarea onClick。我认为jquery用他们的插件之一做了这样的事情。无论如何,那么您可以按字段进行更新(以防您不想编辑整个页面,或者必须更新整个页面/实体来编辑一个字段)。

当然,这需要少量的ajax和一些后端工作才能将其绑定在一起,但这真是微不足道的恕我直言。

本文地址:http://jquery.askforanswer.com/wofenglemaruhewoyinggaichuangjianyigejqueryneirongbianjiqi.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!