Himanshu Rana's Blog

Sharing My IT Experience

Salesforce Visualforce

Create Rich Text Editor In Visualforce

By Nitya Gupta Oct 31, 2018 , , ,

Here in this i will let you know you you can easily embeed richtext- editor in your visualforce page

So to acheive this you need to just put the below code snippet into your visualforce page .

Visualforce Page Code :

<apex:page sidebar="false" showHeader="false" >
<head>
<apex:slds/>
</head>
<body onLoad="iFrameOn();">
<script>
document.write("<form >");
document.write("<table class='slds-theme_alert-texture slds-table_cell-buffer'>");
document.write("<tr>"+
"<td ></td>"+
"<td ><div>"+
"<input type='button' onClick='iBold()' value='B'>&nbsp &nbsp &nbsp"+
"<input type='button' onClick='iUnderline()' value='U'> &nbsp &nbsp &nbsp"+
"<input type='button' onClick='iItalic()' value='I'> &nbsp &nbsp &nbsp"+
"<input type='button' onClick='iFontSize()' value='Font Size'> &nbsp &nbsp &nbsp"+
"<input type='button' onClick='iFontColor()' value='Font Color'> &nbsp &nbsp &nbsp"+
"<input type='button' onClick='iHorizontalRule()' value='HR'> &nbsp &nbsp &nbsp"+
"<input type='button' onClick='iUnorderedList()' value='UL'> &nbsp &nbsp &nbsp"+
"<input type='button' onClick='iOrderedList()' value='OL'> &nbsp &nbsp &nbsp"+
"<input type='button' onClick='iLink()' value='Link'> &nbsp &nbsp &nbsp"+
"<input type='button' onClick='iUnLink()' value='UnLink'> &nbsp &nbsp &nbsp"+
"<input type='button' onClick='iImage()' value='Image'> &nbsp &nbsp &nbsp"+
"</div></td>"+
"</tr>");
document.write("<tr>"+
"<th class='slds-form-element__label slds-text-heading_small slds-m-top--medium'>Editor</th>"+
"<td>"+
"<textarea style='display:none;' rows='4' cols='50' id='body' class='slds-input slds-m-top--medium' required></textarea>"+
"<iframe name='richTextField' id='richTextField' class='slds-input slds-m-top--medium'></iframe>"+
"</td>"+
"</tr>");
document.write("</table>");
document.write("<form/>");
function iFrameOn(){
richTextField.document.designMode='On';
}
function iBold(){
richTextField.document.execCommand('bold',false,null);
}
function iUnderline(){
richTextField.document.execCommand('underline',false,null);
}
function iItalic(){
richTextField.document.execCommand('italic',false,null);
}
function iFontSize(){
var size= prompt('Enter size 1-7','');
richTextField.document.execCommand('FontSize',false,size);
}
function iFontColor(){
var color= prompt('Define a basic color or apply a hexadecimal color code for advanced color','');
richTextField.document.execCommand('forecolor',false,color);
}
function iHorizontalRule(){
richTextField.document.execCommand('insertHorizontalRule',false,null);
}
function iUnorderedList(){
richTextField.document.execCommand('insertUnorderedList',false,'newul');
}
function iOrderedList(){
richTextField.document.execCommand('insertOrderedList',false,'newol');
}
function iLink(){
var link= prompt('Enter the URL for the link','https://');
richTextField.document.execCommand('createLink',false,link);
}
function iUnLink(){
richTextField.document.execCommand('unLink',false,null);
}
function iImage(){
var imgsrc=prompt('Enter Image Location','');
if(imgsrc != null)
richTextField.document.execCommand('insertImage',false,imgsrc);
}
</script>
</body>
</apex:page>
<apex:page sidebar="false" showHeader="false" > <head> <apex:slds/> </head> <body onLoad="iFrameOn();"> <script> document.write("<form >"); document.write("<table class='slds-theme_alert-texture slds-table_cell-buffer'>"); document.write("<tr>"+ "<td ></td>"+ "<td ><div>"+ "<input type='button' onClick='iBold()' value='B'>&nbsp &nbsp &nbsp"+ "<input type='button' onClick='iUnderline()' value='U'> &nbsp &nbsp &nbsp"+ "<input type='button' onClick='iItalic()' value='I'> &nbsp &nbsp &nbsp"+ "<input type='button' onClick='iFontSize()' value='Font Size'> &nbsp &nbsp &nbsp"+ "<input type='button' onClick='iFontColor()' value='Font Color'> &nbsp &nbsp &nbsp"+ "<input type='button' onClick='iHorizontalRule()' value='HR'> &nbsp &nbsp &nbsp"+ "<input type='button' onClick='iUnorderedList()' value='UL'> &nbsp &nbsp &nbsp"+ "<input type='button' onClick='iOrderedList()' value='OL'> &nbsp &nbsp &nbsp"+ "<input type='button' onClick='iLink()' value='Link'> &nbsp &nbsp &nbsp"+ "<input type='button' onClick='iUnLink()' value='UnLink'> &nbsp &nbsp &nbsp"+ "<input type='button' onClick='iImage()' value='Image'> &nbsp &nbsp &nbsp"+ "</div></td>"+ "</tr>"); document.write("<tr>"+ "<th class='slds-form-element__label slds-text-heading_small slds-m-top--medium'>Editor</th>"+ "<td>"+ "<textarea style='display:none;' rows='4' cols='50' id='body' class='slds-input slds-m-top--medium' required></textarea>"+ "<iframe name='richTextField' id='richTextField' class='slds-input slds-m-top--medium'></iframe>"+ "</td>"+ "</tr>"); document.write("</table>"); document.write("<form/>"); function iFrameOn(){ richTextField.document.designMode='On'; } function iBold(){ richTextField.document.execCommand('bold',false,null); } function iUnderline(){ richTextField.document.execCommand('underline',false,null); } function iItalic(){ richTextField.document.execCommand('italic',false,null); } function iFontSize(){ var size= prompt('Enter size 1-7',''); richTextField.document.execCommand('FontSize',false,size); } function iFontColor(){ var color= prompt('Define a basic color or apply a hexadecimal color code for advanced color',''); richTextField.document.execCommand('forecolor',false,color); } function iHorizontalRule(){ richTextField.document.execCommand('insertHorizontalRule',false,null); } function iUnorderedList(){ richTextField.document.execCommand('insertUnorderedList',false,'newul'); } function iOrderedList(){ richTextField.document.execCommand('insertOrderedList',false,'newol'); } function iLink(){ var link= prompt('Enter the URL for the link','https://'); richTextField.document.execCommand('createLink',false,link); } function iUnLink(){ richTextField.document.execCommand('unLink',false,null); } function iImage(){ var imgsrc=prompt('Enter Image Location',''); if(imgsrc != null) richTextField.document.execCommand('insertImage',false,imgsrc); } </script> </body> </apex:page>
<apex:page  sidebar="false" showHeader="false" >
    <head>
        <apex:slds/>
    </head>
    
    <body onLoad="iFrameOn();">
        <script>
        
        document.write("<form >");
       
        document.write("<table class='slds-theme_alert-texture slds-table_cell-buffer'>");
        
        document.write("<tr>"+
                       "<td ></td>"+
                       "<td ><div>"+
                       "<input type='button' onClick='iBold()' value='B'>&nbsp &nbsp &nbsp"+
                       "<input type='button' onClick='iUnderline()' value='U'> &nbsp &nbsp &nbsp"+
                       "<input type='button' onClick='iItalic()' value='I'> &nbsp &nbsp &nbsp"+
                       "<input type='button' onClick='iFontSize()' value='Font Size'> &nbsp &nbsp &nbsp"+
                       "<input type='button' onClick='iFontColor()' value='Font Color'> &nbsp &nbsp &nbsp"+
                       "<input type='button' onClick='iHorizontalRule()' value='HR'> &nbsp &nbsp &nbsp"+
                       "<input type='button' onClick='iUnorderedList()' value='UL'> &nbsp &nbsp &nbsp"+
                       "<input type='button' onClick='iOrderedList()' value='OL'> &nbsp &nbsp &nbsp"+
                       "<input type='button' onClick='iLink()' value='Link'> &nbsp &nbsp &nbsp"+
                       "<input type='button' onClick='iUnLink()' value='UnLink'> &nbsp &nbsp &nbsp"+
                       "<input type='button' onClick='iImage()' value='Image'> &nbsp &nbsp &nbsp"+
                       "</div></td>"+
                       "</tr>");
        document.write("<tr>"+
                       "<th class='slds-form-element__label slds-text-heading_small slds-m-top--medium'>Editor</th>"+
                       "<td>"+
                       "<textarea style='display:none;'  rows='4' cols='50' id='body' class='slds-input slds-m-top--medium' required></textarea>"+
                       "<iframe name='richTextField' id='richTextField' class='slds-input slds-m-top--medium'></iframe>"+
                       "</td>"+
                       "</tr>");
       
        document.write("</table>");
       
        document.write("<form/>");
        
        function iFrameOn(){
            richTextField.document.designMode='On';
        }
        
        function iBold(){
            richTextField.document.execCommand('bold',false,null);
        }
        
        function iUnderline(){
            richTextField.document.execCommand('underline',false,null);
        }
        
        function iItalic(){
            richTextField.document.execCommand('italic',false,null);
        }
        
        function iFontSize(){
            var size= prompt('Enter size 1-7','');
            richTextField.document.execCommand('FontSize',false,size);
        }
        
        function iFontColor(){
            var color= prompt('Define a basic color or apply a hexadecimal color code for advanced color','');
            richTextField.document.execCommand('forecolor',false,color);
        }
        
        function iHorizontalRule(){
            richTextField.document.execCommand('insertHorizontalRule',false,null);
        }
        
        function iUnorderedList(){
            richTextField.document.execCommand('insertUnorderedList',false,'newul');
        }
        
        function iOrderedList(){
            richTextField.document.execCommand('insertOrderedList',false,'newol');
        }
        
        function iLink(){
            var link= prompt('Enter the URL for the link','https://');
            richTextField.document.execCommand('createLink',false,link);
        }
        
        function iUnLink(){
            richTextField.document.execCommand('unLink',false,null);
        }
        
        function iImage(){
            var imgsrc=prompt('Enter Image Location','');
            if(imgsrc != null)
                richTextField.document.execCommand('insertImage',false,imgsrc);
        }
        
        
        </script>
        
    </body>
</apex:page>

hope this will help you ….

Hits: 589

Share Post

By Nitya Gupta

My Name is Himanshu Rana, 23 Years young, born and grow up in Ghaziabad, India. A High Spirited Salesforce Admin, Developer and a Blogger. I currently work at Wakencode Technologies,

Related Post

Salesforce Salesforce Lightining

How to call Apex Method in JS Controller in Aura Component

Himanshu Rana Jun 15, 2023
Salesforce Salesforce Lightining

How to use Data Attributes in Aura Components

Himanshu Rana Jun 14, 2023
Salesforce Salesforce Lightining

Use of Event in Aura Component

Himanshu Rana Jun 13, 2023

Leave a reply

  • Default Comments (0)
  • Facebook Comments

Your email address will not be published. Required fields are marked *

You Missed

Tech Stuff

VS Code Setup

Salesforce Salesforce Lightining

How to call Apex Method in JS Controller in Aura Component

Salesforce Salesforce Lightining

How to use Data Attributes in Aura Components

Salesforce Salesforce Lightining

Use of Event in Aura Component