I am starting to leverage the CKeditor 3.0 in my Flex web application. Up until last week we were trying to get 2.6 to work. It worked in some ways but sadly failed in others as far as Flex/Flash was concerened. The good news is that it appears that 3.0 resolved all the issue we were having. I do see one thing that we may need (very possible that it is already there and I am just missing it) but taht is a way to show/hide the editor.
Now I say it like this as to not be confused with the appendTo/replace/add type features as all of those have their place. Also the destroy() has it's palce as well. No, what I am needing to do is all of those things but also to show / hide the editor. Confused yet? Let me see if I can walk you through how it works in my Flex/Flash project.
Inside my Flex project I use an ExternalInterface to reference javascript in the DOM. From here I call the functions to append the editor to my DIV area and get it moved to teh correct location.
So far so good. I also use anotehr call, when the time is right, to remove the editor fromt eh DOM.
Again, so far so good. Now, because of how we are needing to manage files being inserted into the editor we have our own Flex control that will appear as a popup. What I have now, and it worked for editor 2.6, is as seen in this code block.
This still works in hiding the DIV and in version 2.6 it would also appear to be hidden but in 3.0 the editor is still very much visible. The reason I need it to be hidden is that if it is not then it will still sit on top of the flex popup that will show a listing of approved images to select from. Basicall right before I call the hideCK function right before I do my popup window and once the user makes a selection or otherwise closes the selection window I then call the showCK function to make it all visible. This way I can still read a cursor position and insertHTML into the editor.
Open to ideas.
Now I say it like this as to not be confused with the appendTo/replace/add type features as all of those have their place. Also the destroy() has it's palce as well. No, what I am needing to do is all of those things but also to show / hide the editor. Confused yet? Let me see if I can walk you through how it works in my Flex/Flash project.
Inside my Flex project I use an ExternalInterface to reference javascript in the DOM. From here I call the functions to append the editor to my DIV area and get it moved to teh correct location.
public static var FUNCTION_INSERTCK:String = "document.insertScript = function ()" + "{ " + "if (document.insertCK==null)" + "{" + "insertCK = function (w, h, msg)" + "{ " + "document.getElementById(\"wysiwyg\").style.width = w;"+ "document.getElementById(\"wysiwyg\").style.height = h;"+ "editor = CKEDITOR.appendTo( 'wysiwyg',"+ "{"+ " skin : 'v2',"+ " width: w,"+ " height: h,"+ " resize_enabled: false,"+ " enterMode: 2,"+ // 1 = <P>, 2= <BR>, 3 = <DIV> " shiftEnterMode: 1,"+ // 1 = <P>, 2= <BR>, 3 = <DIV> " toolbar: ["+ " ['Source','Preview'],"+ " ['Cut','Copy','Paste','PasteText','PasteFromWord','Print'],"+ " ['Undo','Redo','Find','Replace','SelectAll','RemoveFormat'],"+ " ['Bold','Italic','Underline','Strike','Subscript','Superscript'],"+ " ['NumberedList','BulletedList','Outdent','Indent','Blockquote'],"+ " ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],"+ " ['Link','Unlink','Anchor'],"+ " ['Image','Table','HorizontalRule','Smiley','SpecialChar'],"+ " ['Styles','Format','Font','FontSize'],"+ " ['TextColor','BGColor'],"+ " ['Maximize', 'ShowBlocks']"+ " ]"+ "});"+ "editor.setData( msg );"+ "}" + "}" + "}";
So far so good. I also use anotehr call, when the time is right, to remove the editor fromt eh DOM.
public static var FUNCTION_REMOVECK:String = "document.insertScript = function ()" + "{ " + "if (document.removeCK==null)" + "{" + "removeCK = function ()" + "{ " + "document.getElementById(\"wysiwyg\").style.visibility = 'hidden';"+ "editor.destroy();"+ "}" + "}" + "}";
Again, so far so good. Now, because of how we are needing to manage files being inserted into the editor we have our own Flex control that will appear as a popup. What I have now, and it worked for editor 2.6, is as seen in this code block.
public static var FUNCTION_HIDECK:String = "document.insertScript = function ()" + "{ " + "if (document.hideCK==null)" + "{" + "hideCK = function ()" + "{ " + "document.getElementById(\"wysiwyg\").style.visibility = 'hidden';"+ ""+ "}" + "}" + "}";
This still works in hiding the DIV and in version 2.6 it would also appear to be hidden but in 3.0 the editor is still very much visible. The reason I need it to be hidden is that if it is not then it will still sit on top of the flex popup that will show a listing of approved images to select from. Basicall right before I call the hideCK function right before I do my popup window and once the user makes a selection or otherwise closes the selection window I then call the showCK function to make it all visible. This way I can still read a cursor position and insertHTML into the editor.
Open to ideas.
Solved -- hide/visible feature
First, the javascript that I used to make it happen
This is how it looks in my Flex Code
and....
If there is a better way I am all ears but this may work fro now.