Create Rich Text Editor In Visualforce

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>

hope this will help you ….



Hits: 112

Share Post

Leave a Reply

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