|
Meeow!
Join Date: 04-13-07
Location: Romania
Posts: 3,235
Latest Blog:
None
|
I love "dead simple" projects, and you know why? because they're easier to extend! 
Check out my example: (though, I changed your code that you won't even recognize it  )
Code:
/*
* Description: JavaScript TextEditor
* Author: Costin Trifan
* Date: Fri Dec 19, 2008
* Based on >> http://corpocrat.com/2008/12/18/free-wysiwyg-textarea-html-editor/#comment-2461
*/
var TextEditor = function()
{
this.menubar = null;
this.editor = null;
};
TextEditor.prototype =
{
/*
* Create the menu bar
*/
createMenuBar : function(parentContainer, _id, _class)
{
(_class) ? _class : null;
this.menubar = JUNE.Dom.createElement('div', null, _id, _class);
parentContainer.appendChild(this.menubar);
},
/*
* Create the text editor (textarea)
*/
createEditor : function(parentContainer, _id, _rows, _cols)
{
this.editor = JUNE.Dom.createElement('textarea', null, _id);
this.editor.setAttribute('rows', _rows || 20);
this.editor.setAttribute('cols', _cols || 80);
parentContainer.appendChild(this.editor);
},
/*
* Create the menu item
*/
createButton : function(_id, _class, _title, _command)
{
var btn = JUNE.Dom.createElement('a', null, _id);
btn.setAttribute('href', '#');
btn.setAttribute('rel', 'nofollow');
btn.setAttribute('title', _title);
if (_class) {
btn.className = _class;
}
JUNE.Event.addHandler(btn, 'click', function(event)
{
JUNE.Event.stopPropagation(event);
JUNE.Event.preventDefault(event);
// execute command:
_command();
});
this.menubar.appendChild(btn);
},
/*
* Get a reference to the text editor
*/
getEditor : function()
{
return this.editor;
},
/*
* Convenience function to inject markup
*/
addTags : function(tagStart, tagEnd)
{
var textarea = this.getEditor();
// Code for IE
if (document.selection)
{
textarea.focus();
var sel = document.selection.createRange();
sel.text = tagStart + sel.text + tagEnd;
}
else
{ // Code for Mozilla Firefox
var len = textarea.value.length;
var start = textarea.selectionStart;
var end = textarea.selectionEnd;
var sel = textarea.value.substring(start, end);
var rep = tagStart + sel + tagEnd;
textarea.value = textarea.value.substring(0,start) + rep + textarea.value.substring(end,len);
}
}
};
/*=========================================
* COMMANDS
=========================================*/
/*
* Add url
*/
TextEditor.prototype.addUrl = function()
{
var url = prompt('Enter the URL:','http://');
if (url)
{
var textarea = this.getEditor();
if (document.selection)
{
this.editor.focus();
var sel = document.selection.createRange();
sel.text = ' ' + sel.text + '';
}
else
{
var len = textarea.value.length;
var start = textarea.selectionStart;
var end = textarea.selectionEnd;
var sel = textarea.value.substring(start, end);
var rep = '<a href="' + url + '">' + sel + '</a>';;
textarea.value = textarea.value.substring(0,start) + rep + textarea.value.substring(end,len);
}
}
};
/*
* Add image
*/
TextEditor.prototype.addImage = function()
{
var url = prompt('Enter the Image URL:','http://');
if (url)
{
var textarea = this.getEditor();
if (document.selection)
{
textarea.focus();
var sel = document.selection.createRange();
if (confirm('Do you want to make this image be opened in a popup window?'))
{
sel.text = "\n"+'<p><img src="' + url + '" name="open_win" alt="Click to display in a popup window" title="Click to display in a popup window" /></p>';
}
else { sel.text = "\n"+'<p><img src="' + url + '" alt="" title="" /></p>'; }
}
else
{
var len = textarea.value.length;
var start = textarea.selectionStart;
var end = textarea.selectionEnd;
var sel = textarea.value.substring(start, end);
var rep;
if (confirm('Do you want to make this image be opened in a popup window?'))
{
rep = "\n"+'<p><img src="' + url + '" name="open_win" alt="Click to display in a popup window" title="Click to display in a popup window" /></p>';
}
else { rep = "\n"+'<p><img src="' + url + '" alt="" title="" /></p>'; }
textarea.value = textarea.value.substring(0,start) + rep + textarea.value.substring(end,len);
}
}
};
TextEditor.prototype.makeBold = function () { return this.addTags('<strong>', '</strong>'); };
TextEditor.prototype.makeItalic = function () { return this.addTags('<em>', '</em>'); };
TextEditor.prototype.makeUnderline = function () { return this.addTags('<u>', '</u>'); };
TextEditor.prototype.makeStrikeThrough = function () { return this.addTags('<strike>', '</strike>'); };
TextEditor.prototype.makeParagraph = function () { return this.addTags("\n"+'<p>', '</p>'); };
TextEditor.prototype.makeQuote = function () { return this.addTags("\n"+'<blockquote>'+"\n"+'<p>', '</p>'+"\n"+'<cite><a href="#source">source</a></cite></blockquote>'); };
TextEditor.prototype.makeCode = function () { return this.addTags("\n"+'<div class="AutoSize code"><div class="codeHeader"><p class="codeTitle">Code:</p><p class="code_Expanded"></p></div><div class="cf">', "\n"+'<!--// THE CODE FROM VISUAL STUDIO GOES HERE -->'+"\n"+'</div></div>'); };
TextEditor.prototype.makeOrderedList = function () { return this.addTags("\n"+'<ol><li><span>', '</span></li></ol>'); };
TextEditor.prototype.makeUnOrderedList = function () { return this.addTags("\n"+'<ul><li><span>', '</span></li></ul>'); };
TextEditor.prototype.makeSubtitle = function () { return this.addTags("\n"+'<h4 class="PostEntrySubTitle">', '</h4>'); };
/*
* SPECIAL COMMANDS
*/
TextEditor.prototype.makePreview = function () { throw new Error('Not yet implemented'); };
TextEditor.prototype.makeSave = function () { throw new Error('Not yet implemented'); };
TextEditor.prototype.makePublish = function () { throw new Error('Not yet implemented'); };
TextEditor.prototype.makeClear = function () { throw new Error('Not yet implemented'); };
and somewhere in your page:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="app_js/JUNE_2_0.js"></script>
</head>
<body>
<form name="form1" method="post" action="#">
<div id="text_editor_wrapper"></div>
</form>
<script type="text/javascript" src="texteditor.js"></script>
<script type="text/javascript">
var parent_container = JUNE.Dom.find('text_editor_wrapper');
var editor = new TextEditor();
// Create the menuBar and the TextEditor
editor.createMenuBar(parent_container, 'menubar');
editor.createEditor(parent_container, 'text_editor'/*[, rows=17, cols=80]*/);
// Register commands
var makeBold = function() { return editor.makeBold(); },
makeItalic = function() { return editor.makeItalic(); },
makeUnderline = function() { return editor.makeUnderline(); },
makeStrike = function() { return editor.makeStrikeThrough(); },
makeOList = function() { return editor.makeOrderedList(); },
makeUList = function() { return editor.makeUnOrderedList(); },
makeQuote = function() { return editor.makeQuote(); },
makeCode = function() { return editor.makeCode(); },
makeParagraph = function() { return editor.makeParagraph(); },
makeSubtitle = function() { return editor.makeSubtitle(); },
addImage = function() { return editor.addImage(); },
addUrl = function() { return editor.addUrl(); },
makePreview = function() { return editor.makePreview(); },
makeSave = function() { return editor.makeSave(); },
makePublish = function() { return editor.makePublish(); },
makeClear = function() { return editor.makeClear(); };
// Create buttons [id, class, title, command]
editor.createButton('bold', 'button button_bold', 'Bold', makeBold);
editor.createButton('italic', 'button button_italic', 'Italic', makeItalic);
editor.createButton('underline', 'button button_underline', 'Underline', makeUnderline);
editor.createButton('strike', 'button button_strike', 'Strike', makeStrike);
editor.createButton('olists', 'button button_olists', 'Ordered list', makeOList);
editor.createButton('ulists', 'button button_ulists', 'Unorderedlist', makeUList);
editor.createButton('quote', 'button button_quote', 'Quote', makeQuote);
editor.createButton('code', 'button button_code', 'Code', makeCode);
editor.createButton('paragraph', 'button button_paragraph', 'Paragraph', makeParagraph);
editor.createButton('subtitle', 'button button_subtitle', 'Subtitle', makeSubtitle);
editor.createButton('image', 'button button_image', 'Insert image', addImage);
editor.createButton('url', 'button button_url', 'Insert link', addUrl);
editor.createButton('preview', 'button button_preview', 'Preview', makePreview);
editor.createButton('save', 'button button_save', 'Save', makeSave);
editor.createButton('publish', 'button button_publish', 'Publish', makePublish);
editor.createButton('clear', 'button button_clear', 'Clear', makeClear);
</script>
</body>
</html>
Definitely I'm gonna use it on my blog
here's a screenshot:
__________________
...to be continued
|