sLedit (mooEdit) v1 » http://blog.sLajax.com

04/26/07
sLedit (mooEdit) v1

I’ve had a lot of requests to send people mooEdit. Thing is, that I’m way to lazy to package the whole thing. So I’m just going to post the source here, and let you figure it out. It’s pretty easy, I’m sure you can do it. Oh yeah, and if anything is wrong with this code, let me know. I kinda just threw the image portion in really quickly without testing. It came from version 2 and should be backwards compatible, but there’s always that chance that I missed something.

javascripthover edges to scroll

 
//////////////////////////////////////////////////////////////////////////////////////////////////
/*  sLedit v1.0 - 3:35 PM 29/03/2007
//////////////////////////////////////////////////////////////////////////////////////////////////
@author: kc@slajax.com
@description: First version of sLedit. Makes all element of a class conditionally editable.
*/
//////////////////////////////////////////////////////////////////////////////////////////////////
// init options - edit these for your purposes
//////////////////////////////////////////////////////////////////////////////////////////////////
window.addEvent('domready', function(){
var edit = new sLedit('.sLedit');
});
//////////////////////////////////////////////////////////////////////////////////////////////////
// class - no editing below this line
//////////////////////////////////////////////////////////////////////////////////////////////////
tinyMCE.init({
mode : "",
theme : "advanced",
plugins : "",
theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,link,unlink,|,image",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom",
extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
file_browser_callback : "fileBrowserCallBack",
paste_use_dialog : false,
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : false,
apply_source_formatting : false
});
function fileBrowserCallBack(field_name, url, type, win) {
var connector = "../../filemanager/browser.html?Connector=connectors/php/connector.php";
var enableAutoTypeSelection = true;
var cType;
tinymcpuk_field = field_name;
tinymcpuk = win;
switch (type) {
case "image":
cType = "Image";
break;
case "flash":
cType = "Flash";
break;
case "file":
cType = "File";
break;
}
if (enableAutoTypeSelection &amp;&amp; cType) {	connector += "&amp;Type=" + cType;	}
window.open(connector, "tinymcpuk", "modal,width=600,height=400");
}

javascripthover edges to scroll

 
var sLedit = new Class({
initialize: function(sLclass) {
//start editor
 
$$(sLclass).each(function(el) {
 
var hilighter = new Fx.Style(el, 'background-color', {wait: false});
 
$(el).addEvent('mouseover', function() {
hilighter.start('#ffffcc');
});
 
$(el).addEvent('mouseout', function() {
hilighter.start('#ffffff');
});
 
if($(el).getProperty('rel').indexOf('textarea') &gt; -1){
 
$(el).addEvent('click', function() {
 
var rel = $(el).getProperty('rel');
var params = parseQuery(rel.substr(5,999));
 
$(el).style.display = 'none';
var content = this.innerHTML;
var container = new Element('div').injectAfter(el);
 
//check params are suitable or set base attributes
if(params['rows'] == undefined)	params['rows'] = '15';
if(params['cols'] == undefined) params['cols'] = '65';
 
var txtID = 'mce_'+$(el).getProperty('id');
 
//textarea
var textarea = new Element('textarea').injectInside(container);
textarea.value = content;
textarea.setProperty('class', 'mceEditor');
textarea.setProperty('id', txtID);
textarea.setStyle('position','relative');
textarea.setProperties({
rows: params['rows'],
cols: params['cols']
});
 
setTextareaToTinyMCE(txtID);
 
//save + cancel div
var saveDiv = new Element('div').injectInside(container);
saveDiv.setProperty('class', 'txtAreaSave');
 
//cancel
var cancel = new Element('a').injectInside(saveDiv);
cancel.setProperty('href', 'javascript:;');
cancel.innerHTML = 'cancel';
 
//seperator
var span = new Element('span').injectAfter(cancel);
span.innerHTML = ' - ';
 
//save
var save = new Element('a').injectInside(saveDiv);
save.setProperty('href', 'javascript:;');
save.innerHTML = 'save';
 
//response
var response = new Element('div').injectBefore(saveDiv);
response.setStyles({'width':'600px'});
response.id = 'txtReponse';
 
save.addEvent('click', function() {
unsetTextareaToTinyMCE(txtID);
$(el).style.display = 'block';
$(el).innerHTML = textarea.value;
 
//values
var rel = $(el).getProperty('rel');
var params = parseQuery(rel.substr(5,999));
var url = '/ajax/update.php';
var pars = 'module_type='+params['module_type']
+'&amp;type_sid='+params['type_sid']
+'&amp;sid='+params['sid']
+'&amp;content='+escape(textarea.value);
 
new Ajax( url, {
method: 'post',
postBody: pars,
update: $('txtReponse'),
onComplete: function(){
var responseFade = new Fx.Style('txtReponse', 'opacity', {
duration:3000,
onComplete:function(){
$('txtReponse').remove();
}
});
responseFade.start.pass([1,0],responseFade).delay(2000);
}
}
).request();
 
textarea.remove();
this.remove();
cancel.remove();
span.remove();
saveDiv.remove();
});
 
cancel.addEvent('click', function() {
unsetTextareaToTinyMCE(txtID);
$(el).style.display = 'block';
textarea.remove();
this.remove();
save.remove();
span.remove();
saveDiv.remove();
});
 
});
}
if($(el).getProperty('rel') == 'input'){
$(el).addEvent('click', function() {
$(el).style.display = 'none';
 
var content = this.innerHTML;
var container = this.parentNode;
 
//input
var textarea = new Element('input').injectInside(container);
textarea.value = content;
textarea.setProperty('size',5);
 
//save + cancel div
var saveDiv = new Element('span').injectInside(container);
saveDiv.setProperty('class', 'inputSave');
 
//cancel
var cancel = new Element('a').injectInside(saveDiv);
cancel.setProperty('href', 'javascript:;');
cancel.innerHTML = 'x';
 
//seperator
var span = new Element('span').injectAfter(cancel);
span.innerHTML = ' - ';
 
//save
var save = new Element('a').injectInside(saveDiv);
save.setProperty('href', 'javascript:;');
save.innerHTML = 's';
 
save.addEvent('click', function() {
$(el).style.display = 'block';
$(el).innerHTML = textarea.value;
 
/* new Ajax() */
textarea.remove();
this.remove();
cancel.remove();
span.remove();
saveDiv.remove();
});
cancel.addEvent('click', function() {
$(el).style.display = 'block';
textarea.remove();
this.remove();
save.remove();
span.remove();
saveDiv.remove();
});
});
}
if($(el).getProperty('rel').indexOf('image') &gt; -1){
 
var rel = $(el).getProperty('rel');
var params = parseQuery(rel.substr(5,999));
$(el).style.cursor = 'pointer';
if( $(el).getParent().getParent().href ) $(el).getParent().getParent().href = '#';
if( $(el).getParent().href ) $(el).getParent().href = '#';
 
$(el).addEvent('click', function() {
 
var imgForm = new Element('form').setProperties({
'action': '/ajax/update.php',
'method': 'post',
'id': 'newImageForm',
'enctype':'multipart/form-data'
});
imgForm.setStyles({ 'text-align':'left' });
imgForm.innerHTML = '<img src="'+$(el).src+'" alt="'+$(el).alt+'" />
 
'
+'
 
<input id="module_type" name="module_type" value="skin_variable" type="hidden" />'
+' <input id="type_sid" name="type_sid" value="'+params[" type="hidden" />'
+' <input id="sid" name="sid" value="'+params[" type="hidden" />'
+'Alt Tag: <input class="textField" id="alt" name="alt" value="'+$(el).alt+'" style="width: 375px" type="input" />'
+'File to Upload:
<input class="textField" id="userimage" name="userimage" type="file" />';var boxHtml = new MooPrompt('Upload a New Image', imgForm, {
buttons: 2,
button1: 'Submit',
button2: 'Cancel',
width: 500,
height: 400,
onButton1: function() {
console.log($('userimage').value.length &gt; 0)
if( $('userimage').value.length &lt; 1 ||
$('userimage').value.length &gt; 0 &amp;&amp;
$('userimage').value.indexOf('.jpg') &gt; -1)
$('newImageForm').submit();
else
alert('Please only upload .jpg files');
}
});
});
}
});}
});
//////////////////////////////////////////////////////////////////////////
// TinyMCE helper functions
//////////////////////////////////////////////////////////////////////////
bTextareaWasTinyfied = false; //this should be global, could be stored in a cookie...
function setTextareaToTinyMCE(sEditorID) {
var oEditor = document.getElementById(sEditorID);
if(oEditor &amp;&amp; !bTextareaWasTinyfied) {
tinyMCE.execCommand('mceAddControl', true, sEditorID);
bTextareaWasTinyfied = true;
}
return;
}
function unsetTextareaToTinyMCE(sEditorID) {
var oEditor = document.getElementById(sEditorID);
if(oEditor &amp;&amp; bTextareaWasTinyfied) {
tinyMCE.execCommand('mceRemoveControl', true, sEditorID);
bTextareaWasTinyfied = false;
}
return;
}
//////////////////////////////////////////////////////////////////////////
// parseQuery code borrowed from ibox borrowed from thickbox, Thanks Cody!
// retrieve rel attributes with cols=x&amp;rows=x
//////////////////////////////////////////////////////////////////////////
parseQuery = function(query) {
var Params = new Object ();
if (!query) return Params;
var Pairs = query.split(/[;&amp;]/);
for ( var i = 0; i &lt; Pairs.length; i++ ) {
var KeyVal = Pairs[i].split('=');
if ( ! KeyVal || KeyVal.length != 2 ) continue;
var key = unescape( KeyVal[0] );
var val = unescape( KeyVal[1] );
val = val.replace(/\+/g, ' ');
Params[key] = val;
}
return Params;
}

So the whole idea, is that you initiate the class at the bottom of the page, and it loops through all class elements applying a conditional editable feature to that element. I decided to add image editing via moo Prompt so make sure you get that script too. You’ll also need tinymce for this version (tinypuk support also included). Ok, now for practical examples so I’m not answering emails about this:

htmlhover edges to scroll

 
<!-- include script dependancies --->
<script src="/skin/shared/js/moo.tools.v1.js" type="text/javascript"></script>
<script src="/skin/shared/js/moo.prompt.v1.js" type="text/javascript"></script>
<script src="/skin/shared/js/tinymce/tiny_mce.js" type="text/javascript"></script>
<script src="/skin/shared/js/sLedit.v1.js" type="text/javascript"></script>

Now for the different editable areas:

htmlhover edges to scroll

 
Image:
<img src="/images/yeahdude.gif" alt="YEAH DUDE" class="sLedit" rel="image" border="0" />
TextArea:
<p class="sLedit" rel="textarea&amp;cols=50&amp;rows=20">TEXTTEXTTEXT</p>
input field:
<span class="sLedit" rel="input">TEXTTEXTTEXT
</span>

And then just run the class:

javascripthover edges to scroll

 
window.onload = function(){
new sLedit(".sLedit");
};

And that should pretty much do it. It’s a fairly simple but unrevised script. I’ve done some new variations of it, however those will remain closed source for a while. I was thinking of putting up demos for the image and input fields, but for now I’ll just give you the textarea example:
Download the source code here

Share and Enjoy: