ansaurus

Question

how to generate tinymce to ajax generated textarea

Answer 1

A:

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"&gt;&lt;/script&gt;
    <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 2009-05-12 07:38:51

dude, u did not read my explaination, as what i'v said ajax generated textarea. the number of images uploaded also the number of textarea generates and every textarea has the tinymce

2009-05-12 07:47:14

Alright, I've attempted a solution

brianpeiris 2009-05-12 10:36:54

thanks dude this might help.Thanks alot

2009-05-13 00:42:45

dude, i give u my script

2009-05-13 00:53:45

ansaurus

tags:

views:

answers:

how to generate tinymce to ajax generated textarea

Edit:

related questions