Problemy z TinyMCE i Ajax?

Przyszło mi ostatnio spotkać się w systemie którym piszę, z problemem, który nie mógł pozostać nierozwiązany. Chodziło dokładnie o to, iż w przypadku inicjowania TinyMCE w containerze otrzymanym z zapytania Ajaxowego, w przypadku, ponownej próby inicjowania pojawiał się komunikat:

g.win.document is null

Problem ten wynika z próby ponownego utworzenia instancji TinyMCE w miejscu, w którym już istnieje jedna instancja, jednak ponieważ zawartość html została przeładowana, a Tiny nie usuwa automatycznie „siebie”, należy to robić ręcznie.

Aby to zrobić, należy w ustawieniach uruchamiających Tiny, zmienić ‚mode: „textareas”‚ na „none”.

tinyMCE.init({
....
mode : "none",
...
});

Dodawanie

Następnie po tym bloku kodu, należy wywołać dla każdego elementu, który chcemy zamienić na nasz edytor, następującą linie kodu:

tinyMCE.execCommand("mceAddControl", false, "'idElementu");

Gdzie „idElementu” wskazywać będzie na element (może to być zarówno div, jak i textarea jak i niemalże dowolny element DOM).

Usuwanie

Pozostało jeszcze usuwanie. Aby je zrealizować, wystarczy przed dodaniem sprawdzić czy istnieje już w pamięci instancja TinyMCE przypisana do określonego idElementu. Wystarczy zatem przed wcześniej wymienioną linią kodu odpowiedzialną za dodawanie instancji Tiny, dodać następujący fragment kodu:

if (tinyMCE.getInstanceById('idElementu'))
{
tinyMCE.execCommand('mceFocus', false, 'idElementu');
tinyMCE.execCommand('mceRemoveControl', false, 'idElementu');
}

Pobieranie zawartości

Z przydatnych metod, warto jeszcze wiedzieć, jak pobierać w dowolnej chwili zawartość (html) z naszego edytora. Realizuje się to przez następujące polecenie, które zwraca zawartość:

tinyMCE.get('idElementu').getContent()

W przypadku, jeżeli na jednej stronie, mamy wiele instancji TinyMCE równocześnie, wystarczy stworzyć obiekt pełniący rolę listy i przechowywać w nim kolejne id edytora. W ten sposób, wykorzystując foreach, będziemy mogli w łatwy i szybki sposób usuwać wiele instancji Tiny jednocześnie.