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'>     "+
"<input type='button' onClick='iUnderline()' value='U'>      "+
"<input type='button' onClick='iItalic()' value='I'>      "+
"<input type='button' onClick='iFontSize()' value='Font Size'>      "+
"<input type='button' onClick='iFontColor()' value='Font Color'>      "+
"<input type='button' onClick='iHorizontalRule()' value='HR'>      "+
"<input type='button' onClick='iUnorderedList()' value='UL'>      "+
"<input type='button' onClick='iOrderedList()' value='OL'>      "+
"<input type='button' onClick='iLink()' value='Link'>      "+
"<input type='button' onClick='iUnLink()' value='UnLink'>      "+
"<input type='button' onClick='iImage()' value='Image'>      "+
"</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