建立一个wysiwyg编辑器 [英] building a wysiwyg editor

问题描述

我需要为我正在开发的项目构建一个所见即所得的编辑器，并需要一些指导。我的一些主要困惑点如下：

iframe docs与contenteditable divs ：我应该使用哪一个？为什么？我讨厌iframe，使用iframe有明显的优势吗？

跨浏览器样式：execCommand似乎在不同的浏览器中应用不同的样式。有没有什么技巧使这个跨浏览器兼容？我根本不应该使用execCommand而是应用我自己的样式吗？

向撤销链添加项目：如何运行我自己的脚本，如插入图像，并允许cntrl + z（撤消）将其删除？是否有一系列撤消/重做项目，以便我可以将项目推入？

保持文本选择：我如何维护文本同时进行操作，如选择字体样式，焦点将离开并删除我的选择。 Rangy ？ Google关闭？是否还有其他的范围/选择库值得关注？

这些项目的任何提示或与构建富文本编辑器相关的任何其他提示都将不胜感激！

解决方案

根据个人经验，我建议不要这样做，除非您的目标是提供非常有限的功能。浏览器差异的绝对数量和解决方案的复杂性使得如果你想做得好，这是一个非常棘手和耗时的任务。

如果没有关闭你的个人问题的想法：

iframe方法，主要有两个原因：

• 您可以完全控制iframe中的文档类型，CSS和脚本。如果你想要一致的行为和外观，并希望在不同的页面中使用你的编辑器，这是必不可少的。


• Firefox特别是错误的 contenteditable 元素，它们最近才引入（版本3.0），而designMode已存在于文档多年（从1.0之前;大约0.6，如​​果内存服务）并且工作得很好。

交叉浏览器样式

如果在不同的浏览器中应用样式对您来说很重要，那么一般情况下你需要编写自己的样式代码。但是，执行此操作会破坏内置的撤消堆栈，您需要实现自己的撤消/重做系统。

将项目添加到撤消链

没有编程方式与内置浏览器撤销堆栈进行交互。您需要自己写。

2012年11月更新

有是自定义撤消/重做的规范，所以这可能是最终可能。以下是 Mozilla 和 WebKit 。

保留文字选择

因为我写了 Rangy ，所以我必须在此声明我的兴趣。我不认为在那里有一个更好的图书馆可以做类似的工作; Google Closure确实有范围/选择API，但我认为它使用自己的专有接口，而不是模拟DOM范围和常见的浏览器选择对象。 IERange 是另一个与Rangy相似的图书馆，但它的作者在发布后立即被完全实现并且看起来很快被放弃。

I need to build a wysiwyg editor for a project I am working on and need some guidance. Some of my key points of confusion are the following:

iframe docs vs. contenteditable divs: which one should I use and why? I hate iframes, is there a clear advantage to using iframes?

cross browser styling: execCommand seems to apply different styles in different browsers. Are there any tricks to making this cross-browser compatible? Should I not use execCommand at all and instead apply my own styles?.

adding items to the undo chain: how can run my own script, such as inserting an image, and allow cntrl+z (undo) to remove it? Is there an array of undo/redo items for contenteditable that I can push items into?

keeping the text selection: how I can maintain text selection while making operations such as selecting the font style, where the focus will leave and remove my selection. Rangy? Google closure? Are there other range/selection libraries worth looking at?

Any tips on these items or anything else related to building a rich text editor would be greatly appreciated!

解决方案

From personal experience, I recommend against doing this unless your aim is to provide a very limited amount of functionality. The sheer number of browser differences and the complexity of their workarounds makes this a very tricky and time-consuming task if you want to do it well.

If that hasn't put you off, here's my thoughts on your individual questions:

iframe docs vs. contenteditable divs

I recommend the iframe approach, for two main reasons:

• You have complete control over the document type, CSS and script within the iframe. This is essential if you want consistent behaviour and appearance and want to use your editor within different pages.
• Firefox in particular is quite buggy with contenteditable elements, which they only introduced relatively recently (version 3.0) while designMode has existed on documents for many years (since pre-1.0; around 0.6, if memory serves) and works pretty well.

cross browser styling

If it's important for you to have uniform results from applying styles in different browsers then in general you will need to write your own styling code. However, doing this will break the built-in undo stack and you will need to implement your own undo/redo system.

adding items to the undo chain

There's no programmatic way to interact with the built-in browser undo stack. You'll need to write your own.

Update November 2012

There is a spec in the works for custom undo/redo so this is likely to be possible eventually. Here are the relevant bugs for Mozilla and WebKit.

keeping the text selection

I have to declare my interests here, since I wrote Rangy. I don't think there's a better library out there that does a similar job; Google Closure does have a range/selection API but I think it uses their own proprietary interface rather than emulating DOM Range and common browser Selection objects. IERange is another library that is similar in idea to Rangy but much less fully realized and seemingly abandoned immediately after release by its author.

这篇关于建立一个wysiwyg编辑器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！