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 :)

My official WebSite >