javascript - building a wysiwyg editor - Stack Overflow

admin管理员组

文章数量:1296401

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!

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!

• javascript
• html
• iframe
• wysiwyg
• contenteditable

Share Improve this question Follow asked Dec 13, 2010 at 7:03 VictorVictor 5,10766 gold badges3232 silver badges4747 bronze badges 5

• 3 I am assuming there is a good reason you cant simply use something like TinyMCE? – Austin Lin Commented Dec 13, 2010 at 7:06
• 1 There's not a great reason, other than a) my boss wants me to make it from scratch and b) for my use case there are many other thing attached to the editor itself, so it would major modifications/addition to tinymce if I used it. I may end up looking at their code to gain some insight for the basic editing. – Victor Commented Dec 13, 2010 at 7:35
• 4 your boss is nuts :) I don't know what exact functionalities you need, but you're going to suffer horribly (or have fun building it, and suffer while maintaining it). Good luck. Still, do have a look at TinyMCE, HtmlArea, and Google Closure's Editor component. I'd suggest you try to restrain your boss first while you explain clearly to him how he's going to make his own life a nightmare (and yours), and then if he still wants it, then define requirements and tests specifications painfully accurately. With him sitting by your side, so he realizes the extent of his madness. – haylem Commented Dec 13, 2010 at 15:49
• There's also the dojo editor: jaredj.dojotoolkit.org/editor_dojo15 github.com/dojo/dijit/blob/master/_editor/range.js – edtechdev Commented Dec 19, 2010 at 3:54
• 1 I've actually been taking a stab at it myself -- though I'm not targetting IE by any means. Even Chrome and Firefox don't give you things for free, I've run into plenty of issues with <span class="Apple-style-span"> -- I think instead of using execcommand it'd be better to handle dom modification yourself -- there are just too many issues currently with execcommand's implementation. – ansiart Commented Jan 26, 2011 at 21:53

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 23

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.

Don't, seriously don't.

What you are suggesting is a major undertaking. You really should be looking at TinyMCE, http://tinymce.moxiecode.com/, or CKEditor, http://ckeditor.com/. Getting what you are after is a massive amount of effort to get working for one version of one browser, to make it portable will take man-years of investment.

A better solution is to look at things like TinyMCE's plugins, http://tinymce.moxiecode.com/plugins.php. You can get your basics the basics (and portability for free) and concentrate on adding the specific value-add items you need to.

本文标签： javascriptbuilding a wysiwyg editorStack Overflow