While building a Blog application within Force.com, I ran into an issue with the default Rich Text editor. How do Authors browse and add images? So I did what any other developer does, I went to Google to find out if anyone else has posted a solution. Back in the day when FORTRAN was a required course for engineering students I had a professor who made a comment that has stuck with me for over 20 years. He said “He said a good programmer will never assume he is the first to run into a particular issue. Use the resources you have at your disposal to find out if a solution already exists “. Of course I am paraphrasing, but I think you get the gist of it.
Anyway, enough reminiscing, I began my search and low and behold I found an article with some sample code posted on how to achieve file uploading and browsing using FCKEditor(Link). Downloaded the code and sure enough, with a few tweaks I was able to browse existing documents within our Salesforce environment and upload new images from my computer. After a few days of testing I noticed issues with FCK while using different browsers(Paste from Word in IE and so on). This led me down the path of abandoning the older FCK for the latest version of CKEditor. So first thing I had to do is figure out how to get at the full functionality of CK within my Visual Force page and I came across a blog post on Mac’sCloud where he discusses replacing the default Rich Text control with a customizable version of CKEditor. Pretty straightforward and easy to implement. So now we have access to all the features of CKEditor, next step is to connect up the file browsing and file uploading functionality from the FCKEditor we had originally gotten to work.
So lets get started.
Step 1:
First lets install the package from Appiphony into our developer account located here: Install Link. This will install the SiteBrowser and FileUpload VF pages and corresponding Apex class files, along with a Document Utility Apex class and a couple of static resources that we are not going to use since we are going to modify the code to work with CKEditor.
Step 2:
Next we are going to download the latest zip version of CKEditor http://ckeditor.com/ (Was currently 3.6.2 at the time of this post.). Go ahead and unzip the contents onto your local drive and navigate to the ckeditor folder. At this point lets go ahead and zip the contents and then upload as a new static resource within our force.com site. While inside the ckeditor folder select all the files and directors and choose send to compressed(zipped) folder from within Windows or you can use what ever zip application you normally use and then rename the file ckeditor.zip. From within your developer account navigate to setup/develop/static resources and click the new button.
Enter ckeditor for the Name and then click browse and select the zip file we just created(ckedtor.zip). Switch the Cache control drop down from private to public and click save.
Step 3:
Now lets create a Visual Force page and test verify that the CKEditor displays properly. I have created a test Object and added a New Rich Text field to the object for the purposes of this demo, but you can use what ever object and Rich Text field you like. From the develop menu, select pages and create a new Visual Force page(I called mine ckeditor for example). Now go in and edit the VF page adding script references to the CKEditor static resource and the JQuery library. Within the apex form tags we are going to add an input text area and set the style class to ckeditor(we are going to change this later) and set richtext to false. Your final page should look similar to this except for the standard controller and inputtext value.
Go ahead and save your page modifications and navigate to the page /apex/ckeditor to see if what we have. Hey look at that now we have the full CK toolbar. All this is detailed out in Mac Anderson's blog linked earlier in the article.
OK, so before anyone starts posting comments like "I already now how to do this but it still won't let me browse my images or upload anything." Just hold tight, we are getting there. If you click on the image icon you should see a pop up that looks like this which is missing the browse button along with the upload tab.
Step 4: Connecting up the SiteFileBrowser.
After you have confirmed that the CKeditor is working, lets go ahead and connect up the SiteFileBrowser Visual Force Page that we installed with the Appiphony package. First we are going to add a bit of JS code to the VF page and set the configuration options for CKEditor for the filebrowserBrowseURL and filebrowserImageBrowseURL pointing them to the SiteFileBrowser VF page.
Because of differences between the old FCKeditor and CKEditor we need to make a modification to the SiteFileBrowser page. Open up the SFB page in edit mode and modify the line within the SelectFile JS function from "window.opener.SetURL(fileURL);" to read "window.opener.CKEDITOR.tools.callFunction(2, fileUrl);". This mod is needed to allow the file browser page to pass back the URL to the CK Image Dialog. We also need to remove the styleClass="ckeditor" from the inputtextarea tag, if not the page will throw a JS error attempting to initialize the editor instance twice.
Go ahead and save the modification and now lets go ahead and navigate back to our VF page. Now when you click on the image icon you should see a "Browse Server" button next to the URL field on the image info Dialog screen.
Hey look at that. Click the button and it should open up a VF page allowing you to search the document directories and select an existing image(You need to check the externally available image check box for them to appear in the list). Click on an image and the window should close and populate the URL field in the above dialog. Select the green OK button and there you go, now able to browse and select existing images.
Step 5: Adding a save button.
On your VF page we need to add a save button as well as some Javascript to get the editor contents.
Because there are a quite a few modifications needed to CKEditor to configure the file upload functionality
So lets get started.
Step 1:
First lets install the package from Appiphony into our developer account located here: Install Link. This will install the SiteBrowser and FileUpload VF pages and corresponding Apex class files, along with a Document Utility Apex class and a couple of static resources that we are not going to use since we are going to modify the code to work with CKEditor.
Next we are going to download the latest zip version of CKEditor http://ckeditor.com/ (Was currently 3.6.2 at the time of this post.). Go ahead and unzip the contents onto your local drive and navigate to the ckeditor folder. At this point lets go ahead and zip the contents and then upload as a new static resource within our force.com site. While inside the ckeditor folder select all the files and directors and choose send to compressed(zipped) folder from within Windows or you can use what ever zip application you normally use and then rename the file ckeditor.zip. From within your developer account navigate to setup/develop/static resources and click the new button.
Step 3:
Now lets create a Visual Force page and test verify that the CKEditor displays properly. I have created a test Object and added a New Rich Text field to the object for the purposes of this demo, but you can use what ever object and Rich Text field you like. From the develop menu, select pages and create a new Visual Force page(I called mine ckeditor for example). Now go in and edit the VF page adding script references to the CKEditor static resource and the JQuery library. Within the apex form tags we are going to add an input text area and set the style class to ckeditor(we are going to change this later) and set richtext to false. Your final page should look similar to this except for the standard controller and inputtext value.
Go ahead and save your page modifications and navigate to the page /apex/ckeditor to see if what we have. Hey look at that now we have the full CK toolbar. All this is detailed out in Mac Anderson's blog linked earlier in the article.
OK, so before anyone starts posting comments like "I already now how to do this but it still won't let me browse my images or upload anything." Just hold tight, we are getting there. If you click on the image icon you should see a pop up that looks like this which is missing the browse button along with the upload tab.
After you have confirmed that the CKeditor is working, lets go ahead and connect up the SiteFileBrowser Visual Force Page that we installed with the Appiphony package. First we are going to add a bit of JS code to the VF page and set the configuration options for CKEditor for the filebrowserBrowseURL and filebrowserImageBrowseURL pointing them to the SiteFileBrowser VF page.
Because of differences between the old FCKeditor and CKEditor we need to make a modification to the SiteFileBrowser page. Open up the SFB page in edit mode and modify the line within the SelectFile JS function from "window.opener.SetURL(fileURL);" to read "window.opener.CKEDITOR.tools.callFunction(2, fileUrl);". This mod is needed to allow the file browser page to pass back the URL to the CK Image Dialog. We also need to remove the styleClass="ckeditor" from the inputtextarea tag, if not the page will throw a JS error attempting to initialize the editor instance twice.
Go ahead and save the modification and now lets go ahead and navigate back to our VF page. Now when you click on the image icon you should see a "Browse Server" button next to the URL field on the image info Dialog screen.
Step 5: Adding a save button.
On your VF page we need to add a save button as well as some Javascript to get the editor contents.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <apex:form><div><apex:inputtextarea id="msgpost" richtext="false" value="{!Test__c.RTdata__c}"> </apex:inputtextarea></div><apex:commandbutton action="{!Save}" onclick="beforeTextSave()" value="Save"><script type="text/javascript">CKEDITOR.replace( '{!$Component.msgpost}', { filebrowserBrowseUrl : '{!$Page.SiteFileBrowser}', filebrowserImageBrowseUrl: '{!$Page.SiteFileBrowser}' //filebrowserImageUploadUrl: '{!$Page.FileUpload}' }); function beforeTextSave() {var objEditor = CKEDITOR.instances['{!$Component.msgpost}'];document.getElementById('{!$component.msgpost}').value = objEditor.getData();}</script></apex:commandbutton></apex:form> |
Because there are a quite a few modifications needed to CKEditor to configure the file upload functionality
hi,
ReplyDeletei am also having this issue, the blog that you have provided is quite useful but im having issues in having the ckeditor work in my vf page. all it shows is a text area with no ckeditor functionality.
I have a custom object merchandise and on it there is custom rtf field where I want to add the ckeditor functionality.
can you please help as to where i am worng
This comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteapex:page showheader="true" sidebar="true" standardController="Merchandise__c"
ReplyDeleteapex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"/
apex:includeScript value="{!URLFOR($Resource.ckeditorrtf, 'ckeditor.js')}"/
h1CKEDITOR test page/h1
apex:form
div
apex:inputtextarea id="msgpost" value="{!Merchandise__c.notes__c}" styleClass="ckeditor" richtext="false"/
/div
/apex:form
/apex:page
Microsoft Word content control like Rich text,Plain text content controls are how to achieve in ckeditor
ReplyDeleteplease help me