Customize CKEditor on Force.com Part 2

So if you followed along in Part One, you should now have a Visual Force page with CKEditor and the full tool bar. Clicking on the image icon should display the default image dialog with the ability to browse your force.com documents and select and image to insert into the editor window. Now lets discuss what it is going to take to be able to upload images from within the dialog window.

Before we get started let me just say that there are a few quirks with this method that I have coded around while I figure out how to address the issue. While not the exact interface I would like to see, until I dig in a little deeper into customizing dialog elements within CKEditor it will have to do.

Step 1: Modifying the CKEditor Image Dialog

If you happen to have taken a look at the original FCKEditor files included with the package we installed in the first post. You may have noticed that what they did was use customize the image upload page using an IFrame to the FileUpload Visual Force page. Then using a bit of Javascript you can pass the image URL back to your Image Tab in the editor. We are going to do the same thing here, however with the new CKEditor all the dialogs are built with Javascript files so unlike the FCK version there is not actually an HTML page to modify. Some of you may have experience in creating custom plug-ins for CK and may have a better way to approach this, but with a limited amount of time available I choose to move on using this method.

So here is what we have to do. We have to remove the current elements on the Upload Dialog Tab and replace them with our own IFrame element. Navigate to the CKEditor folder you unzipped previously. (Since I don't feel like spending the time to modify the minified version of the Js code the next step is completely optional. If you want to modify the minified version have at it.) Under the _Source folder drill down into the  /plugins/image/dialogs directory and copy the image.js file. Next you are going to paste this file in the ckeditor/plugins/image/dialogs folder and overwrite the minified version that currently exists.

Now open this file in your favorite JS editor and locate the section of code that builds the upload tab dialog. It is identified by the section of code that reads id : 'Upload'

In the above code you will see the element definitions for the file upload control and the send to server button. We are going to remove these elements and replace them with an HTML element that contains the IFrame to the FileUpload VF page. You can either comment out the existing elements or just remove them completely so that your upload section looks like this.

 
{
  id : 'Upload',
  hidden : false,
  //filebrowser : 'uploadButton',
  label : editor.lang.image.upload,
  elements :
   [
    {
     type: 'html',
     id: 'upl1',
     html: ''
   }
  ]
 },

Save the js file and then navigate back up to the root of CKEditor. Select all the files and folder and re-zip the contents naming the file ckeditor.zip as we did in the first post. Now go in and update the static resource file with the new version we just created.

Step 2: Update the FileUpload Page

As I stated in the beginning, the upload tab is supposed to pass back the URL of the image that was uploaded back to the info dialog. I am still trying to get this to work. Since the IFrame is opened within the contents of the upload dialog tab you should be able to do something like parent.CKEDITOR.tools.callFunction(2, fileUrl); from the fileupload VF page but it is kicking an error that I still need to investigate. I also noticed that the when adding multiple images, the IFrame is caching the previous content so for now I have added a reset button.

Open up the FileUpload page and comment out the JS line parent.SetUrl( fileUrl ) ;. Next we are going to add a reset button to clear the form.

That's it. Navigate to your Ckeditor page and test the image uploader.  If you hit the OK button, an alert will pop-up letting you know that the URL value for the image was not received. Just ignore and hit the browse server button to select your image.

I will post an update as soon as I get the issue resolved. Along with passing back the URL, I think you should be able to use an IFrame element within the upload dialog instead of the html element. The benefit I believe is that you can handle the cache and refresh issue within the dialog code instead of using a reset button.

Last thing I would suggest is that you modify the CKEditor config.js to customize the toolbar removing items that are not needed.