Create light weight web text editor using jQuery script. now you see below steps to made custom light weight visual editor ..
I was suffer for find good web text editor on web and i got no of web text editor but some not proper working or some more complex and not light weight, After then i decide to make responsive simple web text editor for us.
Live Demo
DownloadBelow simple steps to create custom web text editor :
First you need to create three file
- index.html //For add html contents and made GUI
- custom-editor.js //For writing editor js script
- style.css //Add one style sheets for made responsive layout.
1 ) Write below text on index.html file
Create a simple html file and put down text.
<html> <head> <title>Custom light weight visual editor | demo by 9code.info</title> </head> <body> <!--Add jQuery library and editor script with it's style sheets--!> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="custom-editor.js"></script> <div class="qb-edtor"> <div class="controlFunc"> <div class="btn-group"> <button id="bold" class="options btn" data-op="bold" title="Bold"><b>Bold</b></button> <button id="italic" class="options btn" data-op="italic" title="Italics"><i>Italic</i></button> <button id="underline" class="options btn" data-op="underline" title="Underline"><u>Underline</u></button> </div> <div class="btn-group"> <button id="OL" title="Order List" data-op="ol" class="btn"><span class="icons box-icon _ol"></span></button> <button id="UL" title="Unorder list" data-op="ul" class="btn"><span class="icons box-icon _ul"></span></button> <button id="indent" title="Indent" data-op="indent" class="btn"><span class="icons box-icon _indent"></span></button> <button id="outdent" title="Outdent" data-op="outdent" class="btn"><span class="icons box-icon _outdent"></span></button> </div> <div class="btn-group"> <button id="aleft" title="Align Left" data-op="alignleft" class="btn"><span class="icons box-icon _aleft"></span></button> <button id="acenter" title="Align Center" data-op="aligncenter" class="btn"><span class="icons box-icon _acenter"></span></button> <button id="aright" title="Align right" data-op="alignright" class="btn"><span class="icons box-icon _aright"></span></button> </div> <div class="btn-group"> <button id="code" title="Insert code" data-op="code" class="btn"><strong></></strong></button> <button id="link" title="Insert Link" data-op="link" class="btn"><span class="icons box-icon _link"></span></button> <button id="img" title="Insert Image" data-op="doImg" class="btn"><span class="icons box-icon _img"></span></button> </div> </div> <div class="editor"> <div id="advAns" class="tagList" unselectable="Off" autofocus="true" draggable="false" dropzone="link" align="left" contenteditable="true"> </div> </div> </div> <textarea id="textEdtr"></textarea> > </body> </html>
2 ) Write below code on custom-script.js file
Write below jQuery script and perform operations you need. Ctrl+b to bold and Ctrl+i Italics selected text
jQuery(function($) {
var d=document;
$(d).on("click",".controlFunc .btn-group button",function(){
var op=$(this).data("op");
var a=".controlFunc ";
switch(op){
case "code":
var sText = d.getSelection();
d.execCommand('insertHTML', false, '<code>'+sText+'</code>');
//$("#advAns").append(" <code>Code here .</code> ").focus();
break;
case "ol":
$(a+" #ol").toggleClass("active");
d.execCommand('insertOrderedList', false,"ol");
break;
case "ul":
$(a+" #ul").toggleClass("active");
d.execCommand('insertUnorderedList', false,null);
break;
case "alignleft":
d.execCommand('justifyLeft', false,null);
break;
case "alignright":
d.execCommand('justifyRight', false,null);
break;
case "aligncenter":
d.execCommand('justifyCenter', false,null);
break;
case "link":
$(a+" #link").toggleClass("active");
var link=doLink();
d.execCommand('createLink', false,link);
break;
case "doImg":
var link=doImg();
d.execCommand('insertImage', false,link);
break;
default:
$(a+" #"+op).toggleClass("active");
d.execCommand(op, false,null);
}
});
$(d).on("click","#advAns",function(){
checkActiveC();
});
checkActiveC=function(){
var a=".controlFunc ";
if(d.queryCommandState("bold"))$(a+" #bold").addClass("active");else $(a+" #bold").removeClass("active");
if(d.queryCommandState("italic"))$(a+" #italic").addClass("active");else $(a+" #italic").removeClass("active");
if(d.queryCommandState("underline"))$(a+" #underline").addClass("active");else $(a+" #underline").removeClass("active");
if(d.queryCommandState("insertOrderedList"))$(a+" #ol").addClass("active");else $(a+" #ol").removeClass("active");
if(d.queryCommandState("insertUnorderedList"))$(a+" #ul").addClass("active");else $(a+" #ul").removeClass("active");
if(d.queryCommandState("indent"))$(a+" #indent").addClass("active");else $(a+" #indent").removeClass("active");
if(d.queryCommandState("outdent"))$(a+" #outdent").addClass("active");else $(a+" #outdent").removeClass("active");
if(d.queryCommandState("createLink"))$(a+" #link").addClass("active");else $(a+" #link").removeClass("active");
}
$(d).on("keyup","#advAns",function(e){
if(e.which==38 || e.which==40 || e.which==37 || e.which==39)
{
checkActiveC();
}
// if(e.which==13)d.execCommand("insertHTML", false, "<br/>");
});
doLink=function(){
return prompt("Link URL :","https://9code.info");
}
doImg=function(){
return prompt("Image URL :","URL");
}
dopClose=function(){
$(".q-popup").fadeOut(0);
return false;
}
doInsertLink=function(){
var sText = d.getSelection();
var thi=$(".q-popup");
d.execCommand('insertHTML', false, '<a href="'+(thi.find("#l-lnk").val())+'" title="'+(thi.find("#l-title").val())+'">'+sText+'</a>');
thi.fadeOut(0);
}
var contentEditableSupport = "contentEditable" in document.documentElement;
if(!contentEditableSupport)
{
$(".qb-edtor").fadeOut(0);
$("#textEdtr").fadeIn(0);
}
});
d.queryCommandState(“bold”) is Returns the current state of the specified command.
The effect of some commands depend on the current state of their target. For example, if the ‘bold’ command is executed by theexecCommand method on a bold text, the bold formatting will be removed; otherwise it makes the text bold. So the queryCommandStatemethod for the ‘bold’ command returns true on a bold text and returns false otherwise.
Syntax : bool object.queryCommandState (commandIdentifier);
3) Write below style on style.css file
#textEdtr {
width: 98%;
padding: 5px;
margin: 1%;
border: 1px solid #dedede;
display: none;
outline: hidden;
}
.icons {
background-image: url('editor.png');
}
._ol {
background-position: -30px -169px;
}
._ul {
background-position: -51px -169px;
}
._indent {
background-position: -93px -169px;
}
._outdent {
background-position: -72px -169px;
}
._aleft {
background-position: -114px -169px;
}
._aright {
background-position: -156px -169px;
}
._acenter {
background-position: -135px -169px;
}
._link {
background-position: -205px -169px;
}
._img {
background-position: -177px -169px;
}
.box-icon {
height: 20px;
width: 20px;
float: left;
text-align: center;
vertical-align: middle;
}
code {
background: none repeat scroll 0% 0% rgba(230, 235, 236, 1);
line-height: 10px;
/* margin: 8px; */
width: 98%;
display: block;
padding: 5px 1%;
}
.btn-group {
float: left;
margin: 0px 3px;
}
.btn-group > .btn + .btn {
margin-left: -5px;
}
.q-popup {
position: fixed;
top: 0px;
left: 0px;
text-align: center;
display: table;
width: 100%;
height: 100%;
}
.q-popup .tcell {
display: table-cell;
text-align: center;
vertical-align: middle;
margin: auto;
}
.q-popup .box {
max-width: 350px;
width: 100%;
height: auto;
background: #fff;
margin: auto;
-moz-background-clip: border;
/* Firefox 3.6 */
-webkit-background-clip: border;
/* Safari 4? Chrome 6? */
background-clip: border-box;
/* Firefox 4, Safari 5, Opera 10, IE 9 */
-moz-background-clip: padding;
/* Firefox 3.6 */
-webkit-background-clip: padding;
/* Safari 4? Chrome 6? */
background-clip: padding-box;
/* Firefox 4, Safari 5, Opera 10, IE 9 */
-moz-background-clip: content;
/* Firefox 3.6 */
-webkit-background-clip: content;
/* Safari 4? Chrome 6? */
background-clip: content-box;
/* Firefox 4, Safari 5, Opera 10, IE 9 */
-moz-border-radius: 3px;
/* Firefox 3.6 */
-webkit-border-radius: 3px;
/* Safari 4? Chrome 6? */
border-radius: 3px;
/* Firefox 4, Safari 5, Opera 10, IE 9 */
border: 10px solid rgba(2, 2, 2, 0.4);
}
.controlFunc {
background: none repeat scroll 0px 0px rgba(245, 245, 245, 1);
display: block;
height: auto;
border: 1px solid rgba(239, 239, 239, 1);
padding-top: 3px;
display: inline-block;
}
.controlFunc .btn,
.q-popup button {
text-decoration: none;
display: inline-block;
padding: 1px 10px;
margin-bottom: 0px;
font-size: 14px;
line-height: 20px;
color: #333;
text-align: center;
text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #F5F5F5;
background-image: linear-gradient(to bottom, #FFF, #E6E6E6);
background-repeat: repeat-x;
border-width: 1px;
border-style: solid;
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image: none;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #B3B3B3;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px rgba(0, 0, 0, 0.05);
}
.controlFunc .btn:hover,
.controlFunc .btn-group .active {
background-image: linear-gradient(to bottom, rgba(237, 237, 237, 1), #E6E6E6);
}
#advAns {
background: none repeat scroll 0% 0% rgba(252, 252, 252, 1);
border: 1px solid #E8E8E8;
height: 100px;
width: 97.82%;
display: block;
padding: 1%;
overflow: auto;
outline: 0px;
}
Style sheets are need to made custom layout of editor.
Also you need to jQuery latest library add on this code..
If you any query or need more help then put down comment…
Thanks 🙂
Leave a Reply