Extend Salesforce Rich Text Editor as Multi-Purpose

Sunday, March 10, 2013 by Aslam - The Alexendra
Hi All,
Recently one of client wants some enhancement to existing 'Send Email' screen. They want some functionalities which standard email editor does not support and even salesforce Rich Text Editor also does not support.
I did some research and found that we can extend standard salesforce Rich Text Editor in many ways. One of the enhancement which I did, I am going to show you all.

Client wants a way to fetch all related contacts and opportunities from current account in the email editor on the place he wants and editable and also wants to control as many times as he needed. To achieve this task, I came up with the custom button solution which can be embedded into standard Rich Text Area of salesforce and can attach some event handlers to them.


I created one component called "AddButtonToolbar". In this component, for demo purpose i have created two custom buttons for showContacts and showOpportunities. But you can make as many as you want. Here is the basic configuration you can do:

<apex:component> <apex:attribute name="accountId" type="string" description="passed account id"/> <script src="{!URLFOR($Resource.ckeditor,'ckeditor/jquery-1.4.2.min.js')}"></script> <script> //Event Handler for ShowContacts button //Fetch and prepares the contact table in editor function showContacts(){ // invoke your sfdc method here } //Event Handler for ShowOpportunities button //Fetch and show the opportunities in RTE function showOpportunities(){ // invoke your sfdc method here } /**** Custom buttons configuration Provide name, label, command (js function), and Image for the button */ var config = { "Buttons": [ { "Name" : "Contacts", "Label" : "Show Contacts", "Command": "showContacts", "Image": "{!URLFOR($Resource.ckeditor,'ckeditor/plugins/timestamp/images/16-cube-green.png')}" }, {"Name" : "Opportunities", "Label" : "Show Opportunities", "Command": "showOpportunities", "Image": "{!URLFOR($Resource.ckeditor,'ckeditor/plugins/timestamp/images/contact.png')}" } ] } function initialize(){ for(var i=0; i<config.Buttons.length;i++){ addButton(config.Buttons[i].Name, config.Buttons[i].Image, config.Buttons[i].Command, config.Buttons[i].Label); } } function addButton(name,image,command,label){ $('#cke_21').append('<span class="cke_toolbar_start"></span>'+ '<span role="presentation" class="cke_toolgroup">'+ '<span class="cke_button">'+ '<a onclick="'+command+'();" onblur="this.style.cssText = this.style.cssText;" role="button" hidefocus="true" title="'+label+'" class="cke_button_outdent cke_disabled" id="'+name+'" aria-disabled="true">'+ '<span class="cke_icon" style="background-image:url('+image+');background-position:center;">&nbsp;</span>'+ '<span class="cke_label" id="'+name+'">'+label+'</span>'+ '</a>'+ '</span>'+ '</span>'+ '<span class="cke_toolbar_end"></span>' ); } var defaultFunc = window.onload; window.onload = function() { if(defaultFunc) defaultFunc (); setTimeout("initialize()",1000); } </script> </apex:component>

Line #21-#35 shows configuration option for your buttons.
initialize() method starts creating the buttons.

Here is a working demo for above functionality:
http://labsprojects-developer-edition.ap1.force.com/ExtendRTE?id=001900000054UZ7

You will see two buttons on right side. Click on those buttons to see things in action.

Additionaliy you can put your email address and try to send email to your account to see how email will look.

Mail me for full code as always :)

Thanks
Aslam Bari

24 comments:

Abdul Vahid said...

Again Nice Work :)

chamil madusanka said...

Nice approach!!

Manan Shah said...

Good thought...

Mohsin Raza said...

Aslam, you are just mind blowing....

Anonymous said...

Hi Aslam , Great post as always !!

Could you please provide me code base , so that I could try it out in my org

Email-ID : practicingsf@gmail.com

venkatesh yadav said...

Hi Aslam great job looking nice

can u share your code and static resource to me ,i will practice in my dev
Email-ID :avenkateswarlu7@gmail.com


Regards
venkatesh

Nagendra [NGD] said...

Awesome one approach sir....

Durga said...

Hi Aslam its very nice.
can u share your code on durga.sfcloud@gmail.com

Anonymous said...

Hi Aslam ,

Great Job !!.

Could you please share the code on nirdeshk1988@gmail.com

Anonymous said...

Can you please send me code for the same on sumi.shingavi@gmail.com

sunilkumar t said...

Can you please send me code for the same on sunilkumartaruvu@gmail.com

Rastogi Anand said...

Id Mubark ho

pls send the code to rocksrastogi5@gmail.com

Anonymous said...

Hi Aslam,

Great post.
Please send the code to below email id.
reachheman@gmail.com

Thanks,
NHK

Anonymous said...

awesome-sauce

ajeet surana said...

Hi Aslam , Great post as always !!

Could you please provide me code base , so that I could try it out in my org

Email-ID : aks.ajeet@gmail.com

Anonymous said...

Hi Aslam,

Please send the code to below email id.
Email-Id : rashi.garg@metacube.com

Thanks,
Rashi

MANOHAR ALLA said...

Hi Aslam,

Great post as always !!
Could you please provide me code base , so that I could try it out in my org
Email-ID: manoharallasfdc@gmail.com

Regards,
Manohar

Subhranshu Mohanty said...

Hi Aslam great job looking nice

can u share your code and related components to me .
Email-ID : subhu268@gmail.com

Vishal Trivedi said...

Hi Aslam great job looking nice

can u share your code and related components to me .
Email-ID : vtrivedi270@gmail.com

Vishal Trivedi said...

Hello, Is this possible to add Button on RichText Body..?

Shree latha said...

Finding the time and actual effort to create a superb article like this is great thing. I’ll learn many new stuff right here! Good luck for the next post buddy..
SEO Company in Chennai

sandhosh said...

Really Good blog post.provided a helpful information aboute extended salesforce rich text editor .keep updating...
Digital marketing company in Chennai

Aashi siva said...

Interesting blog post.This blog shows that you have a great future as a content writer.waiting for more updates...

Vmware Training in Chennai

Web Designing Training in Chennai

AWS Training in Chennai

Linux Training in Chennai

Microsoft Azure Training in Chennai

Aashi siva said...

Interesting blog post.This blog shows that you have a great future as a content writer.waiting for more updates...

Vmware Training in Chennai

Web Designing Training in Chennai

AWS Training in Chennai

Linux Training in Chennai

Microsoft Azure Training in Chennai

Post a Comment