Permalink
Browse files

default text taken from DOM

  • Loading branch information...
1 parent 0fc857a commit 03039ff34e10c0ab103fc0288717cc6a26f931a4 mlabod committed Jul 9, 2011
Showing with 18 additions and 9 deletions.
  1. +2 −2 editor.css
  2. +15 −6 editor.jquery.js
  3. +1 −1 index.html
View
@@ -13,14 +13,14 @@
.textarea:focus {
outline:none}
- button.italic, button.bold {
+ button {
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 {
+ button:hover {
background:#e8e8e8;
box-shadow:0px 0px 5px #bbb}
View
@@ -2,27 +2,36 @@
$.fn.simpleEdit = function(options) {
+ // Save Text
+ textcontainer = this;
+ textcontent = this.text();
+
+ // Options
options = $.extend({
- defaultText: "Lorem Ipsum Dolor Lorem Ipsum...",
+ defaultText: textcontent,
}, options);
// Initiate
- textcontainer = this;
- textcontainer.addClass("texteditor");
+ textcontainer.text("").addClass("texteditor");
textarea = $("<div class='textarea'/>");
- textcontainer.append(textarea);
+ textcontainer.append(textarea);
textarea.attr("contenteditable", "true").attr("designmode", "on").text(options.defaultText);
- // Editor
+ // Editor Buttons
+ textcontainer.prepend("<button class='list'>list</button>");
textcontainer.prepend("<button class='italic'>italic</button>");
textcontainer.prepend("<button class='bold'>bold</button>");
- // Formatting Handler
+ // Button Handlers
$(".bold").live("click", function(){
document.execCommand('bold',false,null);
});
$(".italic").live("click", function(){
document.execCommand('italic',false,null);
});
+
+ $(".list").live("click", function(){
+ document.execCommand('insertunorderedlist',false,null)
+ });
};
View
@@ -22,7 +22,7 @@
<body>
<div class="main">
<h1>Simple HTML5 Editor</h1>
- <div class="text"></div>
+ <div class="text">Lorem Ipsum Dolor..</div>
<span></span>
</div>
</body>

0 comments on commit 03039ff

Please sign in to comment.