Results 1 to 3 of 3

Thread: Ext TabPanels and TinyMCE

  1. #1
    Ext User
    Join Date
    Jul 2007
    Posts
    11
    Vote Rating
    0
      0  

    Question Ext TabPanels and TinyMCE

    I'm using Ext 2.2.1 to create Tabs on a page from existing markup. One of those tabs wraps a DIV which contains a textarea to which I'm applying TinyMCE. The TinyMCE editor appears as it should, but is non-functional. You can't select it, type in it, and any of the buttons produces one of a number of errors. ('g.win.document is null' is the most common).

    I thought that loading order might be an issue, so I tried applying the TinyMCE before the tabs are created, as well as after. No difference.

    Here's the relevant code:
    Code:
    var tabs = new Ext.TabPanel({
    			renderTo: 'edit-tabs-area',
    			width:650,
    			plain:true,
    			defaults:{autoHeight: true},
    			items:[
    				{contentEl:'video-detail-info', title: 'Video Info', id: 'inf'}
    				]
    		});
    		
    		tabs.add({contentEl:'attachments', title: 'Attachments', id: 'att'});
    		tabs.add({contentEl:'thumbnails', title: 'Thumbnails'});
    		tabs.add({contentEl:'toc', title: 'Table of Contents', id: 'toctab'});
    		tabs.add({contentEl:'pagecontent', title: 'Page Content', id: 'contenttab'});
    		tabs.activate(activeTab == 'attach' ? 'att' : 'inf');
    	
    		
    		tinyMCE.init({
    			mode : "specific_textareas",
    			editor_selector : "topicTextTextarea",
    			theme: "advanced",
    			plugins : "safari",
    			theme_advanced_layout_manager : "Layout",
    			theme_advanced_toolbar_location : "top",
    			theme_advanced_toolbar_align : "left",
    			theme_advanced_statusbar_location : "bottom",
    			theme_advanced_resizing : true,
    			theme_advanced_buttons1 : "code,|,cut,copy,paste,pasteword,|,spellchecker,|,undo,redo,|,removeformat",
    			theme_advanced_buttons2 : "bold,italic,underline,|,bullist,numlist,|,outdent,indent,|,link,unlink,|,image,hr,|,|,formatselect,fontselect,fontsize,|,forecolor,backcolor",
    			theme_advanced_buttons3 : '',
    			theme_advanced_buttons4 : '',
    			width : '100%'
    		});
    		
    		//tinyMCE.execCommand("mceAddControl", true, 'video-description');
    The HTML for the 'pagecontent' DIV is here:

    Code:
    <div id="content-tab" hide="true">
    	<div id="pagecontent">
    	<textarea class="topicTextTextarea" name="pagecontent_ta">${topicText.sourceText}</textarea>
    	<input type="hidden" name="topicTextId" value="${topicText.textId}"/>
    	</div>
    </div>
    My TEXTAREA is not an Ext control, and doesn't need to be. I'm just using Ext here for the TabPanel. Is there a way to make this work?

    Thanks for any advice!
    Larry

  2. #2
    Ext User
    Join Date
    Jul 2007
    Posts
    11
    Vote Rating
    0
      0  

    Default Solution

    Found a solution. It's a loading order issue. I tried doing the TinyMCE.init() with mode: none, and then adding the editor upon tab selection with
    Code:
    tinyMCE.execCommand("mceAddControl", true, 'video-description');
    but that didn't work either. The solution was to init() the control in the tabchange event handler, like this:

    Code:
    var descMceLoaded = false;
    		
    		tabs.on({
    			tabchange: {
    				fn: function(e){
    					var btn = e.getActiveTab().getId();
    					if (btn == 'contenttab' && descMceLoaded == false){
    						tinyMCE.init({
    							mode : "specific_textareas",
    							editor_selector : "topicTextTextarea",
    							theme: "advanced",
    							plugins : "safari,inlinepopups",
    							theme_advanced_layout_manager : "Layout",
    							theme_advanced_toolbar_location : "top",
    							theme_advanced_toolbar_align : "left",
    							theme_advanced_statusbar_location : "bottom",
    							theme_advanced_resizing : true,
    							theme_advanced_buttons1 : "code,|,cut,copy,paste,pasteword,|,spellchecker,|,undo,redo,|,removeformat",
    							theme_advanced_buttons2 : "bold,italic,underline,|,bullist,numlist,|,outdent,indent,|,link,unlink,|,image,hr,|,|,formatselect,fontselect,fontsize,|,forecolor,backcolor",
    							theme_advanced_buttons3 : '',
    							theme_advanced_buttons4 : '',
    							width : '100%'
    						});
    						descMceLoaded = true;
    					}
    				}
    			}

  3. #3
    Ext User
    Join Date
    Nov 2007
    Posts
    5
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by lbouthillier View Post
    Found a solution. It's a loading order issue. I tried doing the TinyMCE.init() with mode: none, and then adding the editor upon tab selection with
    Code:
    tinyMCE.execCommand("mceAddControl", true, 'video-description');
    but that didn't work either. The solution was to init() the control in the tabchange event handler, like this:

    Code:
    var descMceLoaded = false;
    		
    		tabs.on({
    			tabchange: {
    				fn: function(e){
    					var btn = e.getActiveTab().getId();
    					if (btn == 'contenttab' && descMceLoaded == false){
    						tinyMCE.init({
    							mode : "specific_textareas",
    							editor_selector : "topicTextTextarea",
    							theme: "advanced",
    							plugins : "safari,inlinepopups",
    							theme_advanced_layout_manager : "Layout",
    							theme_advanced_toolbar_location : "top",
    							theme_advanced_toolbar_align : "left",
    							theme_advanced_statusbar_location : "bottom",
    							theme_advanced_resizing : true,
    							theme_advanced_buttons1 : "code,|,cut,copy,paste,pasteword,|,spellchecker,|,undo,redo,|,removeformat",
    							theme_advanced_buttons2 : "bold,italic,underline,|,bullist,numlist,|,outdent,indent,|,link,unlink,|,image,hr,|,|,formatselect,fontselect,fontsize,|,forecolor,backcolor",
    							theme_advanced_buttons3 : '',
    							theme_advanced_buttons4 : '',
    							width : '100%'
    						});
    						descMceLoaded = true;
    					}
    				}
    			}
    Ibouthillier, Your solution to init the control in tab change worked great for me. Thanks!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •