Write content into a dynamic Javascript popup from FCKEditor

In response to a question asked on my “Count the words in an FCKeditor instance with Javascript” post about how to get the content from an FCKEditor instance and load it into a popup window, I posted “Write content into a dynamic Javascript popup” to show how to do this for any content. In this post I now show how to do this specifically for an FCKEditor instance.

Working example

Type some content into the FCKEditor below and then click the “Write to popup” button. A popup window will appear with the content from the editor. This is entirely browser based and does not require a trip back to the server to load another page.

Note that if you are viewing this post in a feed reader or email you will need to click through to view this page in a web browser for the example below to work.

How it works

Here’s the code to make the above work. This is a combination of the code on the write content into a dynamic Javascript popup and get the HTML from an FCKEditor instance posts.

var FCKeditor = FCKeditorAPI.GetInstance('FCKeditorExample');
var w = window.open('', '', 'width=600,height=400,resizeable,scrollbars');
w.document.write(FCKeditor.GetData());
w.document.close(); // needed for chrome and safari

FCKEditorExample is the name of the FCKEditor instance, and in the above example it was created with Javascript like so:

var FCKeditor = new FCKeditor('FCKeditorExample');
FCKeditor.ToolbarSet = "Basic";
FCKeditor.BasePath = "/examples/fckeditor/";
FCKeditor.Height = "100";
FCKeditor.Create();

Styling in the popup window

Writing the FCKEditor instance HTML into the popup won’t obviously contain any CSS styling (unless it is contained inline in the HTML) so if you need to add this as well, then add additional w.document.write lines to add the CSS or external style sheets.