WYSIWYG editor rendering different between Firefox and IE7 - javascript

I have embedded openwysiwyg editor in web application. The things work perfectly fine in Firefox. So the exact scene is I select a drop-down option for email and text area shows up. This text area is replaced by openwysiwyg editor for email formatting. So this looks perfect in Firefox, but doesn't work correctly in Internet Explorer 7. In IE7, the editor shows up even before I select drop-down option. How does IE7 render JavaScript differently from Firefox?

I suggest dropping that editor, which doesn't support Google Chrome (v.14.0.835.202 as of this writing), for a more popular open-source WYSIWYG editor called TinyMCE.
TinyMCE will most likely give your users a more consistent browser experience, and I've personally used this in my projects with great success.
You only have to include the plugins you need, which can make it much more simplified if you want.

Related

Maintain undo functionality with createRange()

I'm working on a Markdown text editor using a contenteditable and Rangy to easily add links and images. The problem is that rangy.createRange();, an important function in the Rangy library, cancels the ability to undo an action (text added in the contenteditable in my case).
I have browsed the Web to find a solution and I have found UndoManager, but I cannot find information about how to use it and if it has been added in Chrome (I'm working on a Chrome Packaged App so I don't care if Safari does not support it).
If somebody knows something about this piece of HTML5 it would be amazing.
Thanks in advance.
According to this link , none of the current browsers support the UndoManager spec. You can test that in your browser by trying to access document.undoManager which undefined in Chrome

HTML Rich Text Editor problems with justify* commands

I'm writing a simple Rich Text Editor which is currently working perfectly in Chrome and Firefox.
Internet Explorer however, is another story. I have finally managed to get most things working in IE with work-arounds and such, but all of my justify commands do nothing.
That is, this bit of code has no effect.
iframe.contentWindow.document.execCommand('justifyRight', false, null);
This is despite all other commands (ie: bold, italic, etc) working just fine.
Any clues as to why the justify* commands are different and not working?
I have a live demo available at http://www.hazaarmvc.com/site/test
Turns out that it was simply the content inside the editor window (an iFrame) that was the problem. It was originally generated using a Mozilla editor. Due to the differences in how each browser renders it's HTML content, IE just didn't know how to apply it's version of justifyleft, etc. Working on an empty editor everything just worked as expected.
See "Internet Explorer Differences" here: https://developer.mozilla.org/en/docs/Rich-Text_Editing_in_Mozilla for an explanation of what is different.
I'm going to chalk this one up to IE just being crap.

Unable to apply CSS in IE9

I have a website that uses OpenTable's reservation widget. In every browser except IE9 (including older versions of IE) I can style and manipulate the widget elements, both through a stylesheet and by using jQuery. But in IE9, the widget shows up with strange styling, and I can't effect it in any way. Even trying a simple test like $('#OT_form').hide(); has no effect whatsoever.
Here's a temporary link to the site:
http://www.tcmulder.com/jing/reservations
Anyone know what the problem might be?

Inserting content into TinyMCE using Ipad's built-in browser

I'm currently using the following simple code to insert content into TinyMCE's editor:
tinyMCE.get("ole_mce").execCommand("mceInsertContent",false,'hello world!');
It works in every major browser I've tested with, except the iPad's built-in one -which is kinda critical for demonstration purposes.
Anyone knows a workaround for this?
Many thanks!
Edit: iPad firmware 4.2.1, tinymce 3.4.2, jquery 1.5.2
You can't use tinyMCE on the iPad at all, since contenteditable isn't supported there.

jquery html textarea plugin for ipad

Has anyone found html textarea plugin that works with iPad?
If i use any plug-in to convert textarea to html rich editor, it hides textarea and adds iframe in place of it. When i click on iframe in windows i can add/edit text like a textarea. Where as in iPad i click on it it doesn't pop up keyboard as its not a textbox or textarea instead its iframe.
i need it for jquery based chat which can run on both computer and iPad. So i need to allow simple formating of text like bold, italic, font etc.
Mobile Safari in iOS prior to version 5 doesn't support contenteditable or designMode, which is the built-in browser editing functionality that underpins most JavaScript rich text editors. You'll need to find another way, such as drawing your own caret and collecting input in a (possibly off-screen) textarea, which is what Google Docs, ACE and CodeMirror do. This is quite involved though.
Another alternative is the Stack Overflow approach, which uses Markdown in a textarea with formatting buttons.
I just stumbled on MarkItUp, which seems to provide a good fall-back HTML (and BBCode) editing mode for mobile browsers that don't support contenteditable properly yet.
Looks like a good alternative solution if you want to give you mobile users a slightly better experience than just editing raw HTML.

Categories