Luce Digitale/JQ Sunny Rich Text Editor – Basic
DEMO
Rich-text editor is web component that allow users to edit and enter text within a web browser.
Rich-text editor is web-based, WYSIWYG (“what you see is what you get”) editor.
With this tool in your website, your clients can add rich text content without programming knowledge.
This tool I coded is free.
If you use it in your website, I will you be glad if you will add a returning link to http://blog.lucedigitale.com
Thanks in advance 
<!DOCTYPE html>
<html>
<!-- Luce Digitale/JQ Sunny Rich Text Editor -->
<!-- Author: Andrea Tonin - http://blog.lucedigitale.com -->
<!-- This code come with absolutely no warranty -->
<!-- If you use this code in your project please give a link to http://blog.lucedigitale.com -->
<!-- Thanks in advance -->
<head>
<style>
/* Input Box Style */
#sunnyrte {
width:100%;
height:200px;
border: 1px solid #c0c0c0;
}
/* Menu Style */
#sunnyrtemenu {
width:100%;
height:60px;
border: 1px solid #c0c0c0;
background-color:#efefef;
}
/* Menu Buttons Style */
.options {
cursor:pointer;
color: #000000;Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
margin-left:3px;
margin-right:3px;
}
a {
text-decoration:none; /* Remove default underline for links */
}
</style>
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
<script type="text/javascript">
$(function(){
$('#sunnyrte').focus();
// Complete rte editing Mozilla list at: https://developer.mozilla.org/en-US/docs/Rich-Text_Editing_in_Mozilla
// Statement: object.execCommand(commandIdentifier, userInterface, value);
// Click #delete -> execute command delete -> only on focus text of #sunnyrte
$('#delete').click(function(){document.execCommand('delete', false, null);$('#sunnyrte').focus();return false;});
// Removes all formatting from the current selection
$('#removeformat').click(function(){document.execCommand('removeFormat', false, null);$('#sunnyrte').focus();return false;});
// Undo
$('#undo').click(function(){document.execCommand('undo', false, null);$('#sunnyrte').focus();return false;});
// Redo
$('#redo').click(function(){document.execCommand('redo', false, null);$('#sunnyrte').focus();return false;});
// Bold
$('#bold').click(function(){document.execCommand('bold', false, null);$('#sunnyrte').focus();return false;});
// Italic
$('#italic').click(function(){document.execCommand('italic', false, null);$('#sunnyrte').focus();return false;});
// Underline
$('#underline').click(function(){document.execCommand('underline', false, null);$('#sunnyrte').focus();return false;});
// Strike
$('#strike').click(function(){document.execCommand('strikeThrough', false, null);$('#sunnyrte').focus();return false;});
// Color RED
$('#red').click(function(){document.execCommand('foreColor', false, "#ff0000");$('#sunnyrte').focus();return false;});
// Decrease Font Size - decreaseFontSize does not work in Chrome
$('#decreasefont').click(function(){document.execCommand('decreaseFontSize', false, null);$('#sunnyrte').focus();return false;});
// Increase Font Size - increaseFontSize does not work in Chrome
$('#increasefont').click(function(){document.execCommand('increaseFontSize', false, null);$('#sunnyrte').focus();return false;});
// Font size
$('#fontsize').click(function(){document.execCommand('fontSize', false, "5");$('#sunnyrte').focus();return false;});
// Font name
$('#fontname').click(function(){document.execCommand('fontName', false, "Verdana");$('#sunnyrte').focus();return false;});
// Subscript
$('#subscript').click(function(){document.execCommand('subscript', false, null);$('#sunnyrte').focus();return false;});
// Superscript
$('#superscript').click(function(){document.execCommand('superscript', false, null);$('#sunnyrte').focus();return false;});
// Hilite
$('#hilitecolor').click(function(){document.execCommand('hiliteColor', false, "#ffff00");$('#sunnyrte').focus();return false;});
// Justify Full
$('#justifyfull').click(function(){document.execCommand('justifyFull', false, null);$('#sunnyrte').focus();return false;});
// Justify Left
$('#justifyleft').click(function(){document.execCommand('justifyLeft', false, null);$('#sunnyrte').focus();return false;});
// Justify Right
$('#justifyright').click(function(){document.execCommand('justifyRight', false, null);$('#sunnyrte').focus();return false;});
// Indent
$('#indent').click(function(){document.execCommand('indent', false, null);$('#sunnyrte').focus();return false;});
// Outdent
$('#outdent').click(function(){document.execCommand('outdent', false, null);$('#sunnyrte').focus();return false;});
// Insert paragraph
$('#paragraph').click(function(){document.execCommand('insertParagraph', false, null);$('#sunnyrte').focus();return false;});
// Ordered List
$('#orderedlist').click(function(){document.execCommand('insertOrderedList', false, null);$('#sunnyrte').focus();return false;});
// Unordered List
$('#unorderedlist').click(function(){document.execCommand('insertUnorderedList', false, null);$('#sunnyrte').focus();return false;});
// Horizontal Role
$('#inserthorizontalrule').click(function(){document.execCommand('insertHorizontalRule', false, null);$('#sunnyrte').focus();return false;});
// Inser plain Text
$('#inserttext').click(function(){document.execCommand('insertText', false, "This is a plain text");$('#sunnyrte').focus();return false;});
// Insert HTML - insertHTML does not work on Internet Explorer
$('#inserthtml').click(function(){document.execCommand('insertHTML', false, "<strong>This is a HTML Statement</strong>");$('#sunnyrte').focus();return false;});
// Insert Table - insertHTML does not work on Internet Explorer
$('#inserttable').click(function(){document.execCommand('insertHTML', false, "<table><tr><td>cell</td><td>cell</td></tr><tr><td>cell</td><td>cell</td></tr></table>");$('#sunnyrte').focus();return false;});
// Insert Image - insertImage does not work on Internet Explorer
$('#insertimage').click(function(){document.execCommand('insertImage', false, "http://www.lucedigitale.com/principale/images/logo.png");$('#sunnyrte').focus();return false;});
// Insert Link
$('#createlink').click(function(){document.execCommand('createLink', false, "http://www.lucedigitale.com/principale/images/logo.png");$('#sunnyrte').focus();return false;});
// Unink
$('#unlink').click(function(){document.execCommand('unlink', false, null);$('#sunnyrte').focus();return false;});
// Show html tags
$('#showhtml').click(function(){alert($("#sunnyrte").html());});
});
</script>
</head>
<body>
<div id="sunnyrtemenu">
<!-- Every option need a id -->
<a id="delete" href="#" class="options">|Delete|</a>
<a id="removeformat" href="#" class="options">|Remove Format|</a>
<a id="undo" href="#" class="options">|UNDO|</a>
<a id="redo" href="#" class="options">|REDO|</a>
<a id="bold" href="#" class="options"><b>|B|</b></a>
<a id="italic" href="#" class="options"><i>|I|</i></a>
<a id="underline" href="#" class="options"><u>|U|</u></a>
<a id="strike" href="#" class="options"><strike>|A|</strike></a>
<a id="red" href="#" class="options"><span style="color:red;">|RED|</span></a>
<a id="decreasefont" href="#" class="options"><small>|Decrease|</small></a>
<a id="increasefont" href="#" class="options"><big>|Increase|</big></a>
<a id="fontsize" href="#" class="options"><font size=5>|Font Size 5|</font></a>
<a id="fontname" href="#" class="options"><font face="verdana">|Verdana|</font></a>
<a id="subscript" href="#" class="options"><sub>|Subscript|</sub></a>
<a id="superscript" href="#" class="options"><sup>|Superscript|</sup></a>
<a id="hilitecolor" href="#" class="options"><span style="background-color: #FFFF00">|Hilite|</span></a>
<a id="justifyfull" href="#" class="options">|Justify Full|</a>
<a id="justifyleft" href="#" class="options">|Justify Left|</a>
<a id="justifyright" href="#" class="options">|Justify Right|</a>
<a id="indent" href="#" class="options">|Indent|</a>
<a id="outdent" href="#" class="options">|Outdent|</a>
<a id="paragraph" href="#" class="options">|Insert Paragraph|</a>
<a id="orderedlist" href="#" class="options">|Ordered List|</a>
<a id="unorderedlist" href="#" class="options">|Unordered List|</a>
<a id="inserthorizontalrule" href="#" class="options">|HR|</a>
<a id="inserttext" href="#" class="options">|Insert Text|</a>
<a id="inserthtml" href="#" class="options">|Insert HTML|</a>
<a id="inserttable" href="#" class="options">|Insert Table|</a>
<a id="insertimage" href="#" class="options">|Insert Image|</a>
<a id="createlink" href="#" class="options">|Link|</a>
<a id="unlink" href="#" class="options">|Unlink|</a>
<a id="showhtml" href="#" class="options">|Show HTML|</a>
</div>
<div id="sunnyrte" contenteditable="true" unselectable="off">Write rich text here ....</div>
<div>Instructions:
<br>
IMAGE EDITING: click the button "Insert Image", click on image, drag handles to resize, SHIFT+drag handles to maintain aspect ratio.
<br>
TABLE EDITING: click the button "Insert Table", click on table, drag handles to resize.
</div>
</body>
</html>
How does it work?
1. Create the HTML code:
<div id="sunnyrtemenu"> <!-- Every option need a id --> <a id="delete" href="#" class="options">|Delete|</a> ... <a id="showhtml" href="#" class="options">|Show HTML|</a> </div> <div id="sunnyrte" contenteditable="true" unselectable="off">Write rich text here ....</div>
We use and editable div, not a classic textbox.
We use a href to create the buttons
2. Style the CSS
<style>
/* Input Box Style */
#sunnyrte {
width:100%;
height:200px;
border: 1px solid #c0c0c0;
}
/* Menu Style */
#sunnyrtemenu {
width:100%;
height:60px;
border: 1px solid #c0c0c0;
background-color:#efefef;
}
/* Menu Buttons Style */
.options {
cursor:pointer;
color: #000000;Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
margin-left:3px;
margin-right:3px;
}
a {
text-decoration:none; /* Remove default underline for links */
}
</style>
3. Load JQuery
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
4. The Javascript
...
// Bold
$('#bold').click(function(){document.execCommand('bold', false, null);$('#sunnyrte').focus();return false;});
...
For every command we use the statement:
object.execCommand (commandIdentifier, userInterface, value);
The code is optimized to run on Mozilla Engine, some commands do not work in Chrome and IExplorer.
Next time I will work to improve cross browser compatibility
