How do I get the icons of TinyMCE to show?

Question

I installed TinyMCE and I have the textbox and the functions work(such as , ) but I don't see the tool box that displays all the icons. Like in this example. How do I get the images to show? All I have is the textbox. I used the code from the example link and theirs has the images and all I have is the textbox. What part do I edit to be able to see the icons?

    //my source link
    <script type="text/javascript" src="/tinymce/jscripts/tiny_mce/tiny_mce.js">
tinyMCE.init({

    // Example content CSS (should be your site CSS)
    content_css : "style12.css",

    // Drop lists for link/image/media/template dialogs
    template_external_list_url : "/tinymce/examples/lists/template_list.js",
    external_link_list_url : "/tinymce/examples/lists/link_list.js",
    external_image_list_url : "/tinymce/examples/lists/image_list.js",
    media_external_list_url : "/tinymce/examples/lists/media_list.js",

Answer 1

Look at the source code of the example you've linked to.
it should work...

this line is important if you want a lot of buttons

theme : "advanced"

Answer 2

Hey there. A couple of things that should help (I'm convinced the first item will solve your problem):

1. Whatever is on the last line in your init script should not have a comma. This will cause some browsers to show none (0) of the buttons. For example, you have a comma at the end of your last line: media_external_list_url : "/tinymce/examples/lists/media_list.js",

2. Make sure your list_url paths are correct.

3. Regardless of what theme you use, you can still define each button and placement. You can start with the "advanced" theme, paste in the following button templates after the init brackets, and edit it down to what you need for your form (but remember to make sure the last line in the init section does not have a comma):

<script type="text/javascript"> 
tinyMCE.init({

mode : "textareas", 
theme : "advanced", 
plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager",

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,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",

theme_advanced_toolbar_location : "top", 
theme_advanced_toolbar_align : "left", 
theme_advanced_statusbar_location : "bottom", 
theme_advanced_resizing : true,


content_css : "style12.css",

// Drop lists for link/image/media/template dialogs 
template_external_list_url : "/tinymce/examples/lists/template_list.js", 
external_link_list_url : "/tinymce/examples/lists/link_list.js", 
external_image_list_url : "/tinymce/examples/lists/image_list.js", 
media_external_list_url : "/tinymce/examples/lists/media_list.js" 

}); 
</script>

If you just want the most basic setup, you can use this init:

<script type="text/javascript"> 
   tinyMCE.init({ 
      mode : "textareas", 
      theme : "simple" 
   }); 
</script> 

Answer 3

I'm thinking the main problem you are having is that you are applying code changes within the tag that loads the code. You should close your script tag and then apply a new script tag, one that is not loading another file, and apply your in-page script there. Remember, load a file (separate tag) and then apply calls to the loaded code.

<script type="text/javascript" src="/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
...code...
</script>