Gravity Forms + CKEditor (WYSIWYG) ... Almost working, except....

Hey Everyone,

I have a small problem...I spent the last 2 days trying to find a solution but no success so far. So, here it is:

I managed to partially integrate CKEditor with Gravity Forms. I'm said partially coz the form is not fully working yet. Here's what i did so far...

After following the guide found here: http://www.gravityhelp.com/forums/topic/post-preview#post-844

1. I downloaded CKEditor and uploaded it on my server.

2. Placed this code in the <HEAD> section to load ckeditor.js:

<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>

3. Used this code to replace the text area with the editor.

<script type="text/javascript">
	CKEDITOR.replace( 'input_1_2' );
</script>

Here's how the whole code looks on my template:

<div style="display:none" class="fancybox-hidden"><div id="fancyboxID-1" style="width:900px;height:620px;">  <?php gravity_form(1, true, true, false, '', true); ?>   </div></div>

<a href="#fancyboxID-1" rel="nofollow"><img src="http://<removed>.com/images/<removed>.png" width="244" height="38" border="0" /></a>

<script type="text/javascript">
	CKEDITOR.replace( 'input_1_2' );
</script>

***** I forgot to say that i use the Easy FancyBox plugin to place the gravity forms in a popup box. This part works great. ******

Now I have the following 2 problems:

Problem #1. The editor is not working...I mean it shows up and everything but i can't type anything in it:

http://img526.imageshack.us/img526/3513/screen1wd.png

The only way to make it work so it lets me type in the editor is to click the Source Button twice:

http://img856.imageshack.us/img856/9373/screen2cn.png

http://img849.imageshack.us/img849/117/screen3gz.png

After i click the Source button twice (disable and enable the visual editor) i can finally type in the text area:

http://img24.imageshack.us/img24/5738/screen4l.png

Problem #2. Having ajax enabled for my form...if i click the submit button on the form, without filling the required fields, the red errors show up but my CKEditor disappears. Take a look:

http://img201.imageshack.us/img201/1760/screen5kg.png

I tried using this code to fix this problem but it doesn't work (i placed it after the form's shortcode on my template):

<script type="text/javascript">
if (CKEDITOR.instances['input_1_2']) {
CKEDITOR.remove(CKEDITOR.instances['input_1_2']);
}
CKEDITOR.replace( 'input_1_2');
}
</script>

It seems i need to use the above code after the ajax load, but i'm not sure where should i place it exactly.

That's it!!! I would really appreciate your help....

I know it's a long post, but i tried to explain everything as clear as possible. Sorry for my bad english. I'm not a native english speaker.

Hope to hear from you soon.

Thanks,
Alin