Question

I recently put the use of TinyMCE in an application I am working on. Everything is working, but the Toolbar is shown on the bottom. I checked the documentation at.

TinyMCE Configuration

This doc shows how to configure the location of the toolbar given you are using Advanced mode and not Simple. I have confirmed that I am using the correct mode as well as my default layout is SimpleLayout but I am not seeing the changes when I use the code they specify to use.

 theme_advanced_toolbar_location : "top"

Here is what my script looks like

 tinyMCE.init({
width : "500",
height : "100",

// General options
mode : "textareas",
theme : "advanced",
editor_selector : "mceSimple"

// Theme options
theme_advanced_buttons1 :"bold,italic,underline,strikethrough,forecolor,backcolor",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_layout_manager : "SimpleLayout"
theme_advanced_resizing : true,

});

I am aware that I do not need to specify the layout manager, but I did it just to show I was specifying it as SimpleLayout

Am I doing something wrong that is not allow it to show the toolbar on top of the textarea as oppose to the bottom?

Answer 1

I used tinyMCE a few months ago. I did have some trouble getting the toolbar to respond the right way. I did some work and found some answers, but I can’t recall the exact jist of what those answers were. Hopefully, this code from my usage will help you, it works great:

tinyMCE.init({
content_css: "/connectation/css/tinyMCEcontent.css",
theme_advanced_font_sizes: "8pt,9pt,10pt,11pt,12pt,13pt,14pt,16pt,18pt,20pt",
font_size_style_values : "8pt,9pt,10pt,11pt,12pt,13pt,14pt,16pt,18pt,20pt",
mode : "textareas",
theme: "advanced",
theme_advanced_buttons1: "bold,italic,underline,|,fontselect,fontsizeselect",
theme_advanced_buttons2: "forecolor,backcolor,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,hr",
theme_advanced_buttons3: ""
});

I don’t see a lot of difference other than that I’m pointing at my own css. Here’s the contents of the css file in case that helps:

    body, td, pre {
    font: 9pt Century Gothic, Verdana, Arial, Sans-Serif;
    color: #333333;
    }

    body {
    background-color: #FFFFFF;
    }

    .mceVisualAid {
    border: 1px dashed #BBBBBB;
    }

    /* MSIE specific */

    * html body {
    scrollbar-3dlight-color: #F0F0EE;
    scrollbar-arrow-color: #676662;
    scrollbar-base-color: #F0F0EE;
    scrollbar-darkshadow-color: #DDDDDD;
    scrollbar-face-color: #E0E0DD;
    scrollbar-highlight-color: #F0F0EE;
    scrollbar-shadow-color: #F0F0EE;
    scrollbar-track-color: #F5F5F5; 
    }