Jump to content

TinyMCE editor with auto update textarea


Recommended Posts

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

	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(){
			editor_selector :"autoload_rte",
			setup : function(ed) {
					if (typeof ProductMultishop.load_tinymce[ed.id] != 'undefined')
						if (typeof ProductMultishop.load_tinymce[ed.id])

				ed.onKeyUp.add(function(ed, e) {
					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>');
							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

Link to comment
Share on other sites

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

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??


Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...