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