CODEWITHSUNDEEP
javascript
Jai_pans
Jai_pans

Reputation:

how to generate tinymce to ajax generated textarea

I have an image multi-uploader script which also each item uploaded was preview 1st before it submitted and each images has its following textarea which are also generated by JavaScript. I want to use the tinymce editor to each textarea generated by the ajax.

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 = "&nbsp;";

        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 and I just 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:

<script type="text/javascript">
    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": "<?php echo session_id(); ?>"},

            // 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 : '<span class="button">Select Files<span class="buttonSmall">(2 MB Max)</span></span>',
            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
        });
    };
</script>

Where should I put on the tinymce function as you mention below?

Upvotes: 0

Views: 1572

Answers (1)

brianpeiris
brianpeiris

Reputation: 10795

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>

Upvotes: 1

Related Questions