You might have seen text editors where you can bold a text, italic a text etc… The perfect example of this the Blogger Post Text Editor.
This is a simple tutorial that will create a text editor using HTML, Jquery & JavaScript.
We have two files, index.html which contains the HTML code and texteditor.js which contains the jQuery code. You should include the texteditor.js in index.html.index.html
<span style="font-family: inherit;"><!DOCTYPE html></span><span style="font-family: inherit;"><html></span>
<span style="font-family: inherit;"> <head></span>
<span style="font-family: inherit;"> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script></span>
<span style="font-family: inherit;"> <script src="texteditor.js"></script></span>
<span style="font-family: inherit;"> </head></span>
<span style="font-family: inherit;"> <body></span>
<span style="font-family: inherit;"> <center style="margin-bottom:20px;"></span>
<span style="font-family: inherit;"> <div class="ze ie"></div></span>
<span style="font-family: inherit;"> <style></span>
<span style="font-family: inherit;"> .font-bold.bold{font-weight:bold;}.italic{font-style:italic;}.selected{background-color: orange;}#openpb{margin:15px;}</span>
<span style="font-family: inherit;"> </style></span>
<span style="font-family: inherit;"> <button type="button" class="g-button g-button-submit" id='stext'>Text</button> </span>
<span style="font-family: inherit;"> <button type="button" class="g-button g-button-submit" id='shtml'>HTML</button></span>
<span style="font-family: inherit;"> <div id="controls" style="margin-bottom: 10px;"></span>
<span style="font-family: inherit;"> <a id="bold" style="color:black;display: inline-block;" class="font-bold"></span>
<span style="font-family: inherit;"> <button type="button">B</button></span>
<span style="font-family: inherit;"> </a> </span>
<span style="font-family: inherit;"> <a id="italic" style="color:black !important;display: inline-block;"class="italic"></span>
<span style="font-family: inherit;"> <button type="button">I</button></span>
<span style="font-family: inherit;"> </a> </span>
<span style="font-family: inherit;"> <a id="link" class="link" style="display: inline-block;"></span>
<span style="font-family: inherit;"> <button type="button">Link</button></span>
<span style="font-family: inherit;"> </a> </span>
<span style="font-family: inherit;"> <select id="fonts" class="g-button"></span>
<span style="font-family: inherit;"> <option value="Normal">Normal</option></span>
<span style="font-family: inherit;"> <option value="Arial">Arial</option></span>
<span style="font-family: inherit;"> <option value="Comic Sans MS">Comic Sans MS</option></span>
<span style="font-family: inherit;"> <option value="Courier New">Courier New</option></span>
<span style="font-family: inherit;"> <option value="Monotype Corsiva">Monotype</option></span>
<span style="font-family: inherit;"> <option value="Tahoma New">Tahoma</option></span>
<span style="font-family: inherit;"> <option value="Times">Times</option></span>
<span style="font-family: inherit;"> <option value="Trebuchet New">Trebuchet</option></span>
<span style="font-family: inherit;"> <option value="Ubuntu">Ubuntu</option></span>
<span style="font-family: inherit;"> </select></span>
<span style="font-family: inherit;"> </div></span>
<span style="font-family: inherit;"> <iframe frameborder="0" id="textEditor" style="width:500px; height:80px;border:2px solid #CCC;border-radius:20px;overflow:auto;"></iframe></span>
<span style="font-family: inherit;"> </div></span>
<span style="font-family: inherit;"> <textarea name="text" id='text' style="border-radius:20px;overflow:auto;display:none;padding-left: 10px;" rows="6" cols="53"></textarea></span>
<span style="font-family: inherit;"> </center></span>
<span style="font-family: inherit;"> </body></span>
<span style="font-family: inherit;"></html></span><p>
<span style="font-family: inherit; font-size: large;"><b>texteditor.js</b></span>
</p>
<span style="font-family: inherit;">$(document).ready(function(){</span>
<span style="font-family: inherit;"> document.getElementById('textEditor').contentWindow.document.designMode="on";</span>
<span style="font-family: inherit;"> document.getElementById('textEditor').contentWindow.document.close();</span>
<span style="font-family: inherit;"> var edit = document.getElementById("textEditor").contentWindow;</span>
<span style="font-family: inherit;"> edit.focus();</span>
<span style="font-family: inherit;"> $("#bold").click(function(){</span>
<span style="font-family: inherit;"> if($(this).hasClass("selected")){</span>
<span style="font-family: inherit;"> $(this).removeClass("selected");</span>
<span style="font-family: inherit;"> }else{</span>
<span style="font-family: inherit;"> $(this).addClass("selected");</span>
<span style="font-family: inherit;"> }</span>
<span style="font-family: inherit;"> boldIt();</span>
<span style="font-family: inherit;"> });</span>
<span style="font-family: inherit;"> $("#italic").click(function(){</span>
<span style="font-family: inherit;"> if($(this).hasClass("selected")){</span>
<span style="font-family: inherit;"> $(this).removeClass("selected");</span>
<span style="font-family: inherit;"> }else{</span>
<span style="font-family: inherit;"> $(this).addClass("selected");</span>
<span style="font-family: inherit;"> }</span>
<span style="font-family: inherit;"> ItalicIt();</span>
<span style="font-family: inherit;"> });</span>
<span style="font-family: inherit;"> $("#fonts").on('change',function(){</span>
<span style="font-family: inherit;"> changeFont($("#fonts").val());</span>
<span style="font-family: inherit;"> });</span>
<span style="font-family: inherit;"> $("#link").click(function(){</span>
<span style="font-family: inherit;"> var urlp=prompt("What is the link:","http://");</span>
<span style="font-family: inherit;"> url(urlp);</span>
<span style="font-family: inherit;"> }); </span>
<span style="font-family: inherit;"> $("#stext").click(function(){</span>
<span style="font-family: inherit;"> $("#text").hide();</span>
<span style="font-family: inherit;"> $("#textEditor").show();</span>
<span style="font-family: inherit;"> $("#controls").show()</span>
<span style="font-family: inherit;"> });</span>
<span style="font-family: inherit;"> $("#shtml").on('click',function(){</span>
<span style="font-family: inherit;"> $("#text").css("display","block");</span>
<span style="font-family: inherit;"> $("#textEditor").hide();</span>
<span style="font-family: inherit;"> $("#controls").hide();</span>
<span style="font-family: inherit;"> });</span>
<span style="font-family: inherit;">});</span>
<span style="font-family: inherit;">function boldIt(){</span>
<span style="font-family: inherit;"> var edit = document.getElementById("textEditor").contentWindow;</span>
<span style="font-family: inherit;"> edit.focus();</span>
<span style="font-family: inherit;"> edit.document.execCommand("bold", false, "");</span>
<span style="font-family: inherit;"> edit.focus();</span>
<span style="font-family: inherit;">}</span>
<span style="font-family: inherit;">function ItalicIt(){</span>
<span style="font-family: inherit;"> var edit = document.getElementById("textEditor").contentWindow;</span>
<span style="font-family: inherit;"> edit.focus();</span>
<span style="font-family: inherit;"> edit.document.execCommand("italic", false, "");</span>
<span style="font-family: inherit;"> edit.focus();</span>
<span style="font-family: inherit;">}</span>
<span style="font-family: inherit;">function changeFont(font){</span>
<span style="font-family: inherit;"> var edit = document.getElementById("textEditor").contentWindow;</span>
<span style="font-family: inherit;"> edit.focus();</span>
<span style="font-family: inherit;"> edit.document.execCommand("FontName", false, font);</span>
<span style="font-family: inherit;"> edit.focus();</span>
<span style="font-family: inherit;">}</span>
<span style="font-family: inherit;">function url(url){</span>
<span style="font-family: inherit;"> var edit = document.getElementById("textEditor").contentWindow;</span>
<span style="font-family: inherit;"> edit.focus();</span>
<span style="font-family: inherit;"> edit.document.execCommand("Createlink", false, url);</span>
<span style="font-family: inherit;"> edit.focus();</span>
<span style="font-family: inherit;">}</span>
<span style="font-family: inherit;">setInterval(function(){</span>
<span style="font-family: inherit;"> var gyt=$("#textEditor").contents().find("body").html().match(/@/g);</span>
<span style="font-family: inherit;"> if($("#textEditor").contents().find("body").html().match(/@/g)>=0){}else{</span>
<span style="font-family: inherit;"> $("#text").val($("#textEditor").contents().find("body").html());</span>
<span style="font-family: inherit;"> }</span>
<span style="font-family: inherit;"> $("#text").val($("#textEditor").contents().find("body").html());</span>
<span style="font-family: inherit;">},1000);</span>
The user will type text in the iframe. The HTML of iframe will be added in the textarea. So when the user clicks HTML button he sees the HTML of iframe. You can pass the textarea value to your database if needed, but use htmlspecialchars when passing in PHP, because the user can inject XSS codes.