PDA

View Full Version : Whizzywig editor single line break in IE!



jamiller
03-12-2008, 03:54 PM
I'm using a wysiwyg editor called Whizzywig (use to be here: http://www.unverse.net/whizzywig-cross-browser-html-editor.html but not anymore...)

Anyways I'm trying to get rid of that annoying Enter key being a <p> tag in IE. I've successfully got rid of it within FF but for the life of me cannot figure out how to get rid of it in IE.

So after playing around with this thing for days and searching and searching the interweb for answers I've now come to you guys for help.

Here is whizzywig.js in all it's glory:
You'll notice on line 396 where I've commented out the line that fixes my problem in FF.

http://www.ja-miller.com/whizzywig.js

I've also emailed the creator using the given email in the copyright but that email doesn't exist anymore..

Any and ALL help is GREATLY appreciated!!

Thanks,

Jeff

Bob90
03-13-2008, 03:28 PM
can you give us a working example page please as the originators site is down.

jamiller
03-13-2008, 03:42 PM
Sorry I can't show you the working example. It's on a secure site. But you should be able to just look at the javascript code to find the problem. Something in that code, and that code alone, is allowing all line breaks in IE to be converted to <p> tags. It's even stated at the top of the javascript in the copyright notice...

Also I wasn't really expecting someone to answer my question but more so hoping that somebody out there has used this Whizzywig.js before and maybe solved the problem I'm having.

Bob90
03-13-2008, 03:51 PM
Well I'm not willing to help increase your finances unless I have a working example. It is unfair to think that someone would be willing to trawl hard code (no working example) and just find the answer for you.

If you post a link to a working example I may be able to help.

jamiller
03-13-2008, 08:32 PM
Although I'm almost certain you won't be able to help because you wanted a working example and you don't need it to help me out I made one anyway. The html only consists of a textarea and the rest is up to the .js file posted in the link above.

http://www.ja-miller.com/whizzywig.html

Really I want someone who is knowledgeable in IE keyCodes or how IE treats keyCodes. Because the problem I'm having isn't as simple as finding keyCode = 13 (as in FF). It is also worthwhile to note that if you hold down the Shift key and then press Enter it will create a SINGLE line break, which is what I want when the user simply presses the Enter key.

Also keep in mind I've eliminated the problem in FF by commenting out a line of code specific to FF.

Bob90
03-15-2008, 11:09 AM
I'm not as evil as I seem, but saying that you're 'almost certain' I wouldn't be able to help was rude - I hope you're suitably ashamed. It was actually the working example I used to test with. I'm sure you wouldn't create a website in hard code and send it to the client without testing it in a browser!?!

Well I'm no expert :D, but this is a good work around. Just add this line of code to the end of the function.



function makeWhizzyWig(txtArea, controls){ // make a WhizzyWig from the textarea
idTa = txtArea;
whizzies[whizzies.length]=idTa;
....
....
idTa=null;
oW.document.body.innerHTML="<P style=\"MARGIN: 0cm 0cm 0pt\">&nbsp;</P>"
} //end makeWhizzyWig


Solution.
I had a look at the sample from MS and it had the same problem, hence the problem was inherent to the editable content in designMode. When I pasted a test piece from MSword the extra line problem disappeared. I simply read what was being pasted and copied it to the innerHTML and the problem was solved.

Felix Riesterer
03-15-2008, 11:59 AM
When it comes to a Javascript-driven WYSIWYG editor I rely on TinyMCE by Moxiecode (http://tinymce.moxiecode.com). I use it in my self-made CMS and it works like a charm - PLUS it is very customizable.

jamiller
03-17-2008, 01:41 PM
Ok.. ! I get it, my bad...

I was just frustrated as hell because of this code. It's been driving me batty for a while now. And your solution doesn't really work for me (I've done the same thing only with the css file). This is because this text is being sent to a php mailer as a variable and I can't have the p style in html email. I've tried a simple str_replace on the php side but for some reason that didn't work. Maybe I'll try it again.

Thanks for your help tho, I really appreciate it ;)

Felix, I'll take a look at TinyMCE. I just don't want to have to redo an entire part of this site with another editor, but it may be worth it.

Nick Souls
08-25-2008, 08:49 PM
Id like to thank both jamiller and bob90.

I am using whizzywig on my blogging site and this problem with the line breaks and <p>s had bothered me for a while. Using the methods described above I was able to 'fix' whizzywig on my site. Thanks again friends.

-Nick