Permalink
Browse files

initial commit

- just two formatting options at the moment: bold and italic
- plugin option: defaultText
  • Loading branch information...
0 parents commit d0c1fa0daacdeccc2595f3f30ad423ab3bd5400a Marvin Labod committed Jul 8, 2011
Showing with 83 additions and 0 deletions.
  1. +26 −0 editor.css
  2. +28 −0 editor.jquery.js
  3. +29 −0 index.html
@@ -0,0 +1,26 @@
+/* Simple HTML5 Editor */
+
+.texteditor {position:relative}
+
+ .texteditor .textarea {
+ margin-top:5px;
+ padding:10px;
+ background:white;
+ border-radius:3px;
+ border:1px solid #ccc;
+ box-shadow:inset 0px 0px 5px #ddd}
+
+ .textarea:focus {
+ outline:none}
+
+ button.italic, button.bold {
+ cursor:pointer;
+ padding:5 10px;
+ background:#f0f0f0;
+ border-radius:3px;
+ border:1px solid #ccc;
+ box-shadow:0px 0px 5px #ddd}
+
+ button.italic:hover, button.bold:hover {
+ background:#e8e8e8;
+ box-shadow:0px 0px 5px #bbb}
@@ -0,0 +1,28 @@
+/* Simple Text Editor jQuery Plugin*/
+
+$.fn.texteditor = function(options) {
+
+ options = $.extend({
+ defaultText: "Lorem Ipsum Dolor Lorem Ipsum...",
+ }, options);
+
+ // Initiate
+ textcontainer = this;
+ textcontainer.addClass("texteditor");
+ textarea = $("<div class='textarea'/>");
+ textcontainer.append(textarea);
+ textarea.attr("contenteditable", "true").attr("designmode", "on").text(options.defaultText);
+
+ // Editor
+ textcontainer.prepend("<button class='italic'>italic</button>");
+ textcontainer.prepend("<button class='bold'>bold</button>");
+
+ // Formatting Handler
+ $(".bold").live("click", function(){
+ document.execCommand('bold',false,null);
+ });
+
+ $(".italic").live("click", function(){
+ document.execCommand('italic',false,null);
+ });
+};
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+
+<html>
+ <head>
+ <title>Simple HTML5 Text Editor</title>
+ <link rel="stylesheet" href="editor.css"/>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
+ <script src="editor.jquery.js"></script>
+
+ <style type="text/css">
+ body {background:#f0f0f0; font-family:"Arial", "Helvetica", Sans-Serif;color:#333}
+ h1 {text-align:center; font-size:18px}
+ .main {width:400px;margin:100px auto}
+ </style>
+
+ <script type="text/javascript">
+ $(function(){
+ $("div.text").texteditor();
+ });
+ </script>
+ </head>
+ <body>
+ <div class="main">
+ <h1>Simple HTML5 Editor</h1>
+ <div class="text"></div>
+ <span></span>
+ </div>
+ </body>
+</html>

0 comments on commit d0c1fa0

Please sign in to comment.