CODEWITHSUNDEEP
tinymcejquery-tools
brunom
brunom

Reputation: 63

Jquery Tools (tabs) + TinyMCE

I'm trying to integrate TinyMCE in Jquery Tools Tabs, but I can't seem to do it. When all is set, I simply get no error, nor a warning. I only get a blank textarea.

I tryed with other Tabs (Jquery UI), and with that solution I am able to see TinyMCE, but I would like to use Jquery Tools, because of it's simplicity in css and filesize.

Update: here's 2 examples: one using Jquery Tools and another Jquery UI

Example 1: Jquery Tools Example 2: Jquery UI

Tinymce init:

    tinyMCE.init({
        // General options
        mode : "textareas",
        theme : "advanced",
        plugins : "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",

        // Theme options
        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
    });

Thank you.

Bruno

Upvotes: 1

Views: 1551

Answers (2)

brunom
brunom

Reputation: 63

I've got it!.

Jquery Tools hides all div's inside the tab's panels by default, and TinyMCE uses DIV's to show the buttons, so those DIV's were being hidden.

What to do?

In Jquery Tools Tabs CSS, tell it to only hide the first DIV by adding >. Example:

instead of: 

.panes div { display:none; }

put

.panes > div { display:none; }

This way, it will only hide the first DIV.

Thank you anyway Thariama

Upvotes: 3

Thariama
Thariama

Reputation: 50832

I think your problem might be with one of the plugins. I suggest you remove all plugins (plugins: "",) and see what happens then. If it works as expected try adding plugin by plugin till you get the one that hinders tinymce to initialize. Button configuration is not crucial here. If the suitable plugin does not exist - the button simply does not show up, but inititialization won't stop because of this.

Upvotes: 0

Related Questions