Create Text Editor using HTML Jquery like in Blogger
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.
Download Demo
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
index.html
<!DOCTYPE html><html>texteditor.js
<head>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="texteditor.js"></script>
</head>
<body>
<center style="margin-bottom:20px;">
<div class="ze ie"></div>
<style>
.font-bold.bold{font-weight:bold;}.italic{font-style:italic;}.selected{background-color: orange;}#openpb{margin:15px;}
</style>
<button type="button" class="g-button g-button-submit" id=stext>Text</button>
<button type="button" class="g-button g-button-submit" id=shtml>HTML</button>
<div id="controls" style="margin-bottom: 10px;">
<a id="bold" style="color:black;display: inline-block;" class="font-bold">
<button type="button">B</button>
</a>
<a id="italic" style="color:black !important;display: inline-block;"class="italic">
<button type="button">I</button>
</a>
<a id="link" class="link" style="display: inline-block;">
<button type="button">Link</button>
</a>
<select id="fonts" class="g-button">
<option value="Normal">Normal</option>
<option value="Arial">Arial</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier New">Courier New</option>
<option value="Monotype Corsiva">Monotype</option>
<option value="Tahoma New">Tahoma</option>
<option value="Times">Times</option>
<option value="Trebuchet New">Trebuchet</option>
<option value="Ubuntu">Ubuntu</option>
</select>
</div>
<iframe frameborder="0" id="textEditor" style="width:500px; height:80px;border:2px solid #CCC;border-radius:20px;overflow:auto;"></iframe>
</div>
<textarea name="text" id=text style="border-radius:20px;overflow:auto;display:none;padding-left: 10px;" rows="6" cols="53"></textarea>
</center>
</body>
</html>
$(document).ready(function(){
document.getElementById(textEditor).contentWindow.document.designMode="on";
document.getElementById(textEditor).contentWindow.document.close();
var edit = document.getElementById("textEditor").contentWindow;
edit.focus();
$("#bold").click(function(){
if($(this).hasClass("selected")){
$(this).removeClass("selected");
}else{
$(this).addClass("selected");
}
boldIt();
});
$("#italic").click(function(){
if($(this).hasClass("selected")){
$(this).removeClass("selected");
}else{
$(this).addClass("selected");
}
ItalicIt();
});
$("#fonts").on(change,function(){
changeFont($("#fonts").val());
});
$("#link").click(function(){
var urlp=prompt("What is the link:","http://");
url(urlp);
});
$("#stext").click(function(){
$("#text").hide();
$("#textEditor").show();
$("#controls").show()
});
$("#shtml").on(click,function(){
$("#text").css("display","block");
$("#textEditor").hide();
$("#controls").hide();
});
});
function boldIt(){
var edit = document.getElementById("textEditor").contentWindow;
edit.focus();
edit.document.execCommand("bold", false, "");
edit.focus();
}
function ItalicIt(){
var edit = document.getElementById("textEditor").contentWindow;
edit.focus();
edit.document.execCommand("italic", false, "");
edit.focus();
}
function changeFont(font){
var edit = document.getElementById("textEditor").contentWindow;
edit.focus();
edit.document.execCommand("FontName", false, font);
edit.focus();
}
function url(url){
var edit = document.getElementById("textEditor").contentWindow;
edit.focus();
edit.document.execCommand("Createlink", false, url);
edit.focus();
}
setInterval(function(){
var gyt=$("#textEditor").contents().find("body").html().match(/@/g);
if($("#textEditor").contents().find("body").html().match(/@/g)>=0){}else{
$("#text").val($("#textEditor").contents().find("body").html());
}
$("#text").val($("#textEditor").contents().find("body").html());
},1000);
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.
alternative link download
