Search code examples
tinymcewysiwygtext-editor

TinyMCE Not Rendering in Browser


Hi guys i am building a blogging system for my new Social Network and am using TinyMCE to write posts with! for some reason though It does not show up and have no idea why!

I have downloaded the package from their website and uploaded the thing to my server and have made a page called blog_writer.php with the following:

This is the form that contains my text area:

<form method="post" action="blog_writer.php">
  <div id="blogMsg"><?php echo $msg; ?></div>
  <div id="blogTitle">
  Choose a topic:
  <select name="topic">
  <option value="  ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
  <?php 
  $sql = "SELECT id,name FROM blog_topics ORDER BY name";
  $query = mysqli_query($db_conx, $sql) or die (mysqli_error());
  while($row = mysqli_fetch_array($query)){
      echo '<option value="' . $option[id] . '">' . $option[name] . '</option>';
  }?>

  </select>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  Enter a title:
  <input name="title" type="text" size="80" value="<?php echo $title; ?>" />
  </div>
  <div id="blogContent"><textarea name="blog" id="blog" cols="80" rows="25" class="tinymce"><?php echo $blog; ?></textarea>
  <br/><br/>
  <input type="submit" name="submit" id="submit" value="Publish Blog Post">
  <br/><br/>
  </div>
  <div class="blogClear"></div>
</form>

And here is the javascript I am using on the page to bring in the text editor and replace my textarea:

<script src="js/javascript-1.9.1.js" type="text/javascript"></script>
<script src="tiny_mce/jquery.tinymce.js"></script>
<script>
$().ready(function() {
    $('textarea.tinymce').tinymce({
        script_url : 'tiny_mce/tiny_mce.js',
        theme : "advanced",
        plugins : "autolink,lists,inlinepopups,paste,noneeditable,nonebreaking",
        theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
            theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
            theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
            theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_statusbar_location : "bottom",
            theme_advanced_resizing : true,
    });
});
</script>

As far as I can see by comparing my page with the example page they provide in the download there should be something showing uo! but All i am getting is a blank page as of now!

Many thanks in advance guys!

Phillip Dews


Solution

  • You could try to give a class to your textarea and add this to your tinymce config

    mode:'exact',
    elements : "your_textarea_class",