TinyMCE editor and EXT library - a troubled marriage

TinyMCE, together with the FCKeditor, is perhaps the best WYSIWYG editor available. EXT 3, the recent version of EXT, is a cool (but for certain licences paid) javascript library. EXT comes with its own WYSIWYG editor, but it is no match for TinyMCE. Naturally, one would like to use these two together - TinyMCE for text input, EXT for creating trees, datagrids, dragging and a whole range of dynamic effects. To make life a bit more complicated, TinyMCE and EXT do not go along very well. So far I have noticed two issues:

1. TinyMCE converted textarea + EXT drag and drop = the text disappears
2. EXT TabPanel prevents TinyMCE init

The first problem is in fact not directly connected to Ext.dd . The textarea was, together with other elements, embedded in a parent DIV and this DIV was moved manually by calling InsertBefore in the "notify drop" function. Nevertheless, the text disappeared. The solution (I do not claim it is the best or the only way how to handle this problem) is
removing the particular textarea from TinyMce just before the textarea is moved around and adding it back after it is safely placed in the new position.

Thus the set of commands is like this:

notifyDrop: function(dd, e, data) {
tinyMCE.execCommand('mceRemoveControl', false, TextAreaId);
Ext.fly('idDivMoved').insertBefore(SomeElement);
tinyMCE.execCommand('mceAddControl', false, TextAreaId);
}

The second problem concerns the loading order, TinyMCE instance cannot be created before the particular Tab exist. Fortunately, the problem is well known and solved.

The code below is slightly different from the original and shows where to place the tinyMCE.init and how to select the tab using the id of element it is rendered to ('Atab' in this example)

var tabs = new Ext.TabPanel({
renderTo: 'tabs',
width:780,
activeTab: 0,
frame:true,
defaults:{autoHeight: true},
items:[
{contentEl:'Atab', title: 'A'},
{contentEl:'Btab', title: 'B'}
],

listeners: {
tabchange : function(e) {
var act = e.getActiveTab();
if (act.contentEl == 'Atab' && descMceLoaded == false){

tinyMCE.init({
mode : "textareas",
theme : "simple",
language : "cs"
});

descMceLoaded = true;
}
}
}

})