TinyMCE editor with auto update textarea

[mitsos1os]

Hi guys. I am creating a module which adds a tab to the product admin panel. I have a textarea where I want the tiny mce editor to appear. I achieved this by running this javascript command when my tab is loaded

tinySetup({
	editor_selector :"MyTextAreaClass"
});

It works fine. However I noticed that in the informations tab it uses some complex javascript to immediately update the hidden text areas with the formatted content of the equivalent tinymce editors.

This happens by binding specific events of keys pressed in the editor in order to trigger the update of the textareas...

this takes place with the following code found in forms.tpl

tabs_manager.onLoad('Informations', function(){
		tinySetup({
			editor_selector :"autoload_rte",
			setup : function(ed) {
				ed.onInit.add(function(ed)
				{
					if (typeof ProductMultishop.load_tinymce[ed.id] != 'undefined')
					{
						if (typeof ProductMultishop.load_tinymce[ed.id])
							ed.hide();
						else
							ed.show();
					}
				});

				ed.onKeyUp.add(function(ed, e) {
					tinyMCE.triggerSave();
					textarea = $('#'+ed.id);
					max = textarea.parent('div').find('span.counter').attr('max');
					if (max != 'none')
					{
						textarea_value = textarea.val();
						count = stripHTML(textarea_value).length;
						rest = max - count;
						if (rest < 0)
							textarea.parent('div').find('span.counter').html('<span style="color:red;">{l s='Maximum'} '+max+' {l s='characters'} : '+rest+'</span>');
						else
							textarea.parent('div').find('span.counter').html(' ');
					}
				});
			}
		});
	});

I really liked this behaviour and I tried to imitate it in my tab.

I took the portion of tinySetup and tried to adjust it to my needs. Here are where the problems begin.

First of all, I cannot find what the setup : object in the tinySetup function is,,,,

I can see that through it, the calls to other functions are used, but I cannot understand where it comes from.

 

Also if I just use this code then my javascript file containing this code becomes invisible to the browser and not loaded... Still don't know why...

 

Also I cannot understand where the ed variable (editor) comes from. Where it is initialized....

 

Anyway the bottom line is that I would like to have the immediate update of the textarea with the value of the editor... How can we accomplish this?

 

Thank you for your time

[mitsos1os]

After resting through the night, frustration went a bit away and took a look again with a more relaxed way!!!

Anyway, searching through tinymce documentation I found that the setup callback is used to hook events on the editor :http://www.tinymce.com/wiki.php/Configuration3x:setup

So that would be the correct way to use it, use setup to add an onKeyUp.add event to the editor to call the TriggerSave()  I mentioned earlier. That would be enough. However as soon as I mention in my code the setup: portion of the tinySetup function my javascript file isn't detected in the browser propably of some conflict..

So any ideas here? Why can't I use the setup callback in my own tab's editor initialization??

Thanks

[mitsos1os]

Ok replying again to myself... I found the solution...

The problem was that I was using the function tinySetup in my .js file which I loaded using the hook hookActionAdminControllerSetMedia which inserted the file but it was quite early in the order of javascript files and the tinymce javascript files were after so their functions were unknown.

 

Almost broke my computer from my frustration haha......

Anyway you can mark it as solved!