Hi, i have a image multi-uloader script which also each item uploaded was preview 1st b4 it submitted and each images has its following textarea which are also generated by javascript and my problem is i want to use the tinymce editor to each textarea generated by the ajax.
Any help will be appreciated..
here is my script function fileQueueError(file, errorCode, message) { try { var imageName = "error.gif"; var errorName = ""; if (errorCode === SWFUpload.errorCode_QUEUE_LIMIT_EXCEEDED) { errorName = "You have attempted to queue too many files."; }
if (errorName !== "") {
alert(errorName);
return;
}
switch (errorCode) {
case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
imageName = "zerobyte.gif";
break;
case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
imageName = "toobig.gif";
break;
case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
default:
alert(message);
break;
}
addImage("images/" + imageName);
} catch (ex) {
this.debug(ex);
}
}
function fileDialogComplete(numFilesSelected, numFilesQueued) { try { if (numFilesQueued > 0) { this.startUpload(); } } catch (ex) { this.debug(ex); } }
function uploadProgress(file, bytesLoaded) {
try {
var percent = Math.ceil((bytesLoaded / file.size) * 100);
var progress = new FileProgress(file, this.customSettings.upload_target);
progress.setProgress(percent);
if (percent === 100) {
progress.setStatus("Creating thumbnail...");
progress.toggleCancel(false, this);
} else {
progress.setStatus("Uploading...");
progress.toggleCancel(true, this);
}
} catch (ex) {
this.debug(ex);
}
}
function uploadSuccess(file, serverData) { try { var progress = new FileProgress(file, this.customSettings.upload_target);
if (serverData.substring(0, 7) === "FILEID:") {
addRow("tableID","thumbnail.php?id=" + serverData.substring(7),file.name);
//setup();
//generateTinyMCE('itemdescription[]');
progress.setStatus("Thumbnail Created.");
progress.toggleCancel(false);
} else {
addImage("images/error.gif");
progress.setStatus("Error.");
progress.toggleCancel(false);
alert(serverData);
}
} catch (ex) {
this.debug(ex);
}
}
function uploadComplete(file) { try { /* I want the next upload to continue automatically so I'll call startUpload here */ if (this.getStats().files_queued > 0) { this.startUpload(); } else { var progress = new FileProgress(file, this.customSettings.upload_target); progress.setComplete(); progress.setStatus("All images received."); progress.toggleCancel(false); } } catch (ex) { this.debug(ex); } }
function uploadError(file, errorCode, message) { var imageName = "error.gif"; var progress; try { switch (errorCode) { case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED: try { progress = new FileProgress(file, this.customSettings.upload_target); progress.setCancelled(); progress.setStatus("Cancelled"); progress.toggleCancel(false); } catch (ex1) { this.debug(ex1); } break; case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED: try { progress = new FileProgress(file, this.customSettings.upload_target); progress.setCancelled(); progress.setStatus("Stopped"); progress.toggleCancel(true); } catch (ex2) { this.debug(ex2); } case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED: imageName = "uploadlimit.gif"; break; default: alert(message); break; }
addImage("images/" + imageName);
} catch (ex3) {
this.debug(ex3);
}
}
function addRow(tableID,src,filename)
{
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
rowCount + 1;
row.id = "row"+rowCount;
var cell0 = row.insertCell(0);
cell0.innerHTML = rowCount;
cell0.style.background = "#FFFFFF";
var cell1 = row.insertCell(1);
cell1.align = "center";
cell1.style.background = "#FFFFFF";
var imahe = document.createElement("img");
imahe.setAttribute("src",src);
var hidden = document.createElement("input");
hidden.setAttribute("type","hidden");
hidden.setAttribute("name","filename[]");
hidden.setAttribute("value",filename);
/*var hidden2 = document.createElement("input");
hidden2.setAttribute("type","hidden");
hidden2.setAttribute("name","filename[]");
hidden2.setAttribute("value",filename);
cell1.appendChild(hidden2);*/
cell1.appendChild(hidden);
cell1.appendChild(imahe);
var cell2 = row.insertCell(2);
cell2.align = "left";
cell2.valign = "top";
cell2.style.background = "#FFFFFF";
//tr1.appendChild(td1);
var div2 = document.createElement("div");
div2.style.padding ="0 0 0 10px";
div2.style.width = "400px";
var alink = document.createElement("a");
//alink.style.margin="40px 0 0 0";
alink.href ="#";
alink.innerHTML ="Cancel";
alink.onclick= function () {
document.getElementById(row.id).style.display='none';
document.getElementById(textfield.id).disabled='disabled';
};
var div = document.createElement("div");
div.style.margin="10px 0";
div.appendChild(alink);
var textfield = document.createElement("input");
textfield.id = "file"+rowCount;
textfield.type = "text";
textfield.name = "itemname[]";
textfield.style.margin = "10px 0";
textfield.style.width = "400px";
textfield.value = "Item Name";
textfield.onclick= function(){
//textfield.value="";
if(textfield.value=="Item Name")
textfield.value="";
if(desc.innerHTML=="")
desc.innerHTML ="Item Description";
if(price.value=="")
price.value="Item Price";
}
var desc = document.createElement("textarea");
desc.name = "itemdescription[]";
desc.cols = "80";
desc.rows = "4";
desc.innerHTML = "Item Description";
desc.onclick = function(){
if(desc.innerHTML== "Item Description")
desc.innerHTML = "";
if(textfield.value=="Item name" || textfield.value=="")
textfield.value="Item Name";
if(price.value=="")
price.value="Item Price";
}
var price = document.createElement("input");
price.id = "file"+rowCount;
price.type = "text";
price.name = "itemprice[]";
price.style.margin = "10px 0";
price.style.width = "400px";
price.value = "Item Price";
price.onclick= function(){
if(price.value=="Item Price")
price.value="";
if(desc.innerHTML=="")
desc.innerHTML ="Item Description";
if(textfield.value=="")
textfield.value="Item Name";
}
var span = document.createElement("span");
span.innerHTML = "View";
span.style.width = "auto";
span.style.padding = "10px 0";
var view = document.createElement("input");
view.id = "file"+rowCount;
view.type = "checkbox";
view.name = "publicview[]";
view.value = "y";
view.checked = "checked";
var div3 = document.createElement("div");
div3.appendChild(span);
div3.appendChild(view);
var div4 = document.createElement("div");
div4.style.padding = "10px 0";
var span2 = document.createElement("span");
span2.innerHTML = "Default Display";
span2.style.width = "auto";
span2.style.padding = "10px 0";
var radio = document.createElement("input");
radio.type = "radio";
radio.name = "setdefault";
radio.value = "y";
div4.appendChild(span2);
div4.appendChild(radio);
div2.appendChild(div);
//div2.appendChild(label);
//div2.appendChild(table);
div2.appendChild(textfield);
div2.appendChild(desc);
div2.appendChild(price);
div2.appendChild(div3);
div2.appendChild(div4);
cell2.appendChild(div2); }
function addImage(src,val_id) { var newImg = document.createElement("img"); newImg.style.margin = "5px 50px 5px 5px"; newImg.style.display= "inline"; newImg.id=val_id; document.getElementById("thumbnails").appendChild(newImg); if (newImg.filters) { try { newImg.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 0; } catch (e) { // If it is not set initially, the browser will throw an error. This will set it if it is not set yet. newImg.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + 0 + ')'; } } else { newImg.style.opacity = 0; }
newImg.onload = function () {
fadeIn(newImg, 0);
};
newImg.src = src;
}
function fadeIn(element, opacity) { var reduceOpacityBy = 5; var rate = 30; // 15 fps
if (opacity < 100) {
opacity += reduceOpacityBy;
if (opacity > 100) {
opacity = 100;
}
if (element.filters) {
try {
element.filters.item("DXImageTransform.Microsoft.Alpha").opacity = opacity;
} catch (e) {
// If it is not set initially, the browser will throw an error. This will set it if it is not set yet.
element.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + opacity + ')';
}
} else {
element.style.opacity = opacity / 100;
}
}
if (opacity < 100) {
setTimeout(function () {
fadeIn(element, opacity);
}, rate);
}
}
/* ************************************** * FileProgress Object * Control object for displaying file info * ************************************** */
function FileProgress(file, targetID) { this.fileProgressID = "divFileProgress";
this.fileProgressWrapper = document.getElementById(this.fileProgressID);
if (!this.fileProgressWrapper) {
this.fileProgressWrapper = document.createElement("div");
this.fileProgressWrapper.className = "progressWrapper";
this.fileProgressWrapper.id = this.fileProgressID;
this.fileProgressElement = document.createElement("div");
this.fileProgressElement.className = "progressContainer";
var progressCancel = document.createElement("a");
progressCancel.className = "progressCancel";
progressCancel.href = "#";
progressCancel.style.visibility = "hidden";
progressCancel.appendChild(document.createTextNode(" "));
var progressText = document.createElement("div");
progressText.className = "progressName";
progressText.appendChild(document.createTextNode(file.name));
var progressBar = document.createElement("div");
progressBar.className = "progressBarInProgress";
var progressStatus = document.createElement("div");
progressStatus.className = "progressBarStatus";
progressStatus.innerHTML = " ";
this.fileProgressElement.appendChild(progressCancel);
this.fileProgressElement.appendChild(progressText);
this.fileProgressElement.appendChild(progressStatus);
this.fileProgressElement.appendChild(progressBar);
this.fileProgressWrapper.appendChild(this.fileProgressElement);
document.getElementById(targetID).appendChild(this.fileProgressWrapper);
fadeIn(this.fileProgressWrapper, 0);
} else {
this.fileProgressElement = this.fileProgressWrapper.firstChild;
this.fileProgressElement.childNodes[1].firstChild.nodeValue = file.name;
}
this.height = this.fileProgressWrapper.offsetHeight;
} FileProgress.prototype.setProgress = function (percentage) { this.fileProgressElement.className = "progressContainer green"; this.fileProgressElement.childNodes[3].className = "progressBarInProgress"; this.fileProgressElement.childNodes[3].style.width = percentage + "%"; }; FileProgress.prototype.setComplete = function () { this.fileProgressElement.className = "progressContainer blue"; this.fileProgressElement.childNodes[3].className = "progressBarComplete"; this.fileProgressElement.childNodes[3].style.width = "";
}; FileProgress.prototype.setError = function () { this.fileProgressElement.className = "progressContainer red"; this.fileProgressElement.childNodes[3].className = "progressBarError"; this.fileProgressElement.childNodes[3].style.width = "";
}; FileProgress.prototype.setCancelled = function () { this.fileProgressElement.className = "progressContainer"; this.fileProgressElement.childNodes[3].className = "progressBarError"; this.fileProgressElement.childNodes[3].style.width = "";
}; FileProgress.prototype.setStatus = function (status) { this.fileProgressElement.childNodes[2].innerHTML = status; };
FileProgress.prototype.toggleCancel = function (show, swfuploadInstance) { this.fileProgressElement.childNodes[0].style.visibility = show ? "visible" : "hidden"; if (swfuploadInstance) { var fileID = this.fileProgressID; this.fileProgressElement.childNodes[0].onclick = function () { swfuploadInstance.cancelUpload(fileID); return false; }; } };
i am using a swfuploader an i jst added a input fields and a textarea when it preview the images which ready to be uploaded and from my html i have this script
var swfu; window.onload = function () { swfu = new SWFUpload({ // Backend Settings upload_url: "../we_modules/upload.php", // Relative to the SWF file or absolute post_params: {"PHPSESSID": ""}, // File Upload Settings file_size_limit : "20 MB", // 2MB file_types : "*.*", //file_types : "", file_types_description : "jpg", file_upload_limit : "0", file_queue_limit : "0", // Event Handler Settings - these functions as defined in Handlers.js // The handlers are not part of SWFUpload but are part of my website and control how // my website reacts to the SWFUpload events. //file_queued_handler : fileQueued, file_queue_error_handler : fileQueueError, file_dialog_complete_handler : fileDialogComplete, upload_progress_handler : uploadProgress, upload_error_handler : uploadError, upload_success_handler : uploadSuccess, upload_complete_handler : uploadComplete, // Button Settings button_image_url : "../we_modules/images/SmallSpyGlassWithTransperancy_17x18.png", // Relative to the SWF file button_placeholder_id : "spanButtonPlaceholder", button_width: 180, button_height: 18, button_text : 'Select Files(2 MB Max)', button_text_style : '.button { font-family: Helvetica, Arial, sans-serif; font-size: 12pt;cursor:pointer } .buttonSmall { font-size: 10pt; }', button_text_top_padding: 0, button_text_left_padding: 18, button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT, button_cursor: SWFUpload.CURSOR.HAND, // Flash Settings flash_url : "../swfupload/swfupload.swf", custom_settings : { upload_target : "divFileProgressContainer" }, // Debug Settings debug: false }); };where should i put on the tinymce function as you mention below?
-
Taken directly from the TinyMCE documentation:
<script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> tinyMCE.init({ mode : "textareas", theme : "simple" }); </script> <form method="post" action="somepage"> <textarea name="content" style="width:100%"> </textarea> </form>Please read the documentation for basic questions like this. If you get stuck or need help after you've done that, provide a clear explanation of your problem (and sample code if possible) so that we can help you.
Edit:
Alright, I've attempted a solution to the problem. The following code loads 20 images and textareas dynamically and then turns the textareas into TinyMCE editors (I hope you don't mind the jQuery):
<html> <head> <script src="TinyMCE/jscripts/tiny_mce/tiny_mce.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <style> img { height: 100px; display: block;} li { border: 1px solid black; margin: 1em; padding: 1em; } #message { position: fixed; top: 0; left: 50%; margin-left: -100px; width: 200px; text-align: center; background-color: white; border: 1px solid black;} </style> </head> <body> <ul> </ul> <div id="message">Loading...</div> <script> $(function(){ var numImages = 20; for (var i = 0; i < numImages; i++) { // Create an img element with a random image var img = $('<img />').attr('src', randomXKCD); // Attach a callback to the image's load event img.load(function(){ numImages--; if (numImages === 0) { // When all the images have loaded, // turn the textareas into tinyMCE editors tinyMCE.init({ mode: 'textareas', theme: 'simple', oninit: function(){$('#message').hide()} }); } }); // Add the image and a textarea to the document. $('ul').append( $('<li />') .append(img) .append('<textarea />') ); } // helper function to get a random image. function randomXKCD() { var xkcds = [ 'http://imgs.xkcd.com/comics/barrel_mommies.jpg', 'http://imgs.xkcd.com/comics/su_doku.jpg', 'http://imgs.xkcd.com/comics/linux_user_at_best_buy.png', 'http://imgs.xkcd.com/comics/commented.png', 'http://imgs.xkcd.com/comics/typewriter.png', 'http://imgs.xkcd.com/comics/pirate_bay.png', 'http://imgs.xkcd.com/comics/quirky_girls.png', 'http://imgs.xkcd.com/comics/firefly.jpg', 'http://imgs.xkcd.com/comics/kepler.jpg', 'http://imgs.xkcd.com/comics/centrifugal_force.png', 'http://imgs.xkcd.com/comics/trebuchet.png', 'http://imgs.xkcd.com/comics/egg_drop_failure.png', 'http://imgs.xkcd.com/comics/too_old_for_this_shit.png', 'http://imgs.xkcd.com/comics/2008_christmas_special.png', 'http://imgs.xkcd.com/comics/braille.png', 'http://imgs.xkcd.com/comics/impostor.png', 'http://imgs.xkcd.com/comics/not_enough_work.png' ]; return xkcds[Math.floor(Math.random() * xkcds.length)]; } }); </script> </body> </html>brianpeiris : Alright, I've attempted a solution
0 comments:
Post a Comment