Ask Search:
Sachin PatilSachin Patil 

how to integrate ckeditor (rich text editor) with visualforce page?

Best Answer chosen by Sachin Patil
Dhananjaya DeeviDhananjaya Deevi
Hi Pralhad,
Please find below the code.

Visualforce Code:

<apex:page controller="CKEditController" showHeader="false" id="thepageid">
   <apex:form id="theformid">
  <apex:includescript value="{!URLFOR($Resource.CkEditor, 'ckeditor/ckeditor.js')}" />
  
  <apex:inputtextarea id="editor1" value="{!Parameter}" styleClass="ckeditor" richtext="false"/>
 
  <apex:commandButton value="save" onclick="abc()"/>
  </apex:form>
<apex:form >
  <script type="text/javascript">
window.onload = function()
{
   CKEDITOR.replace('thepageid:theformid:editor1'); 
}

function abc()
{
var element = CKEDITOR.instances['editor1'].getData();
alert(element);
}
</script>
</apex:form>
</apex:page>
________________________________________________________-

Controller Code:

public class CKEditController
{
    public string Parameter{get; set;}
    public CKEditController()
    {
        Parameter = ApexPages.currentPage().getParameters().get('p7');
        system.debug(Parameter);
       
    //    return null;
    }
}


I hope this information has been helpful in resolving your issue.   Please be sure to mark a post that has been most helpful as “Best Answer” to help others in the community with similar questions.

Regards,
Dhananjey.

All Answers

Shivanath DevinarayananShivanath Devinarayanan
Here's a nice post to help you out ...

http://macscloud.com/replace-salesforce-rich-text-editor/

  

if our suggestion(s) worked,  let us know by marking the answer as "Best Answer" right under the comment.This will help the rest of the community should they have a similar issue in the future.  Thank you!

Shivanath
Dhananjaya DeeviDhananjaya Deevi
Hi Pralhad,
Please find below the code.

Visualforce Code:

<apex:page controller="CKEditController" showHeader="false" id="thepageid">
   <apex:form id="theformid">
  <apex:includescript value="{!URLFOR($Resource.CkEditor, 'ckeditor/ckeditor.js')}" />
  
  <apex:inputtextarea id="editor1" value="{!Parameter}" styleClass="ckeditor" richtext="false"/>
 
  <apex:commandButton value="save" onclick="abc()"/>
  </apex:form>
<apex:form >
  <script type="text/javascript">
window.onload = function()
{
   CKEDITOR.replace('thepageid:theformid:editor1'); 
}

function abc()
{
var element = CKEDITOR.instances['editor1'].getData();
alert(element);
}
</script>
</apex:form>
</apex:page>
________________________________________________________-

Controller Code:

public class CKEditController
{
    public string Parameter{get; set;}
    public CKEditController()
    {
        Parameter = ApexPages.currentPage().getParameters().get('p7');
        system.debug(Parameter);
       
    //    return null;
    }
}


I hope this information has been helpful in resolving your issue.   Please be sure to mark a post that has been most helpful as “Best Answer” to help others in the community with similar questions.

Regards,
Dhananjey.
This was selected as the best answer
Sachin PatilSachin Patil
Thanks for reply.
Shivanath DevinarayananShivanath Devinarayanan
Glad we could help !