Problem integrating TinyMCE in an application

Problem integrating TinyMCE in an application

  
Greetings!

I'm trying to integrate TinyMCE (Javascript WYSIWYG editor) in an application but the strangest thing is happening... I have a text area in my form associated to a text variable and when I hit «save» the variable is empty. This is happening inside/outside edit record with other editors too, like Wyzz. and NicEdit.


Thanks in advance.
J. Heleno
Hi João,

Check the CKEditor implementation (http://www.outsystems.com/NetworkSolutions/ProjectDetail.aspx?ProjectId=97) and see if it helps you.
It's probably related with an postback issue but without your source code we can't figure out...

Regards,
Rafael Pereira
Hi João,

That's a great initiative you got there. If you get it to run, how about making a component out of it? :)

Still, in this case, there might be a couple different reasons for that happening.

The most likely cause may be the fact that the editor itself is NOT associated to the text area you're thinking of. The text area is associated to the text variable, but your Javascript editor has no relation whatsoever to that text area - or does it?

I'd recommend looking into our CKEditor component, and see how it works, since it probably is doing the same thing you're trying to do.

A second idea may be the fact that the "Save" button might not be set to Submit, though that seems less likely.

Let us know how it goes!

Regards,

Paulo Tavares
I've prepared a small eSpace for you guys to see.

The TinyMCE *.js and other files are in the resources (not all of them, only the ones needed for a "simple" editor).

To initialize TinyMCE in the Htmlcode_Edit webscreen one must add the following tag <script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>.
I used the proper function ftom HTTPRequestHandler.

Now things get a bit not so agile...

The last step in the initialization process is to add this code to the header of our page.
<script type="text/javascript">
	tinyMCE.init({
		mode : "textareas",
		theme : "simple"
	});
</script>
As I can not use AddJavaScriptTag to accomplish this I added this code to the webscreen javascript:

function myHeader() {
    var headID = document.getElementsByTagName('head')[0];         
    var newScript = document.createElement('script');
    newScript.type = 'text/javascript';
    newScript.innerHTML = 'tinyMCE.init({ mode : "textareas", theme : "simple" });';
    headID.appendChild(newScript);
}


...and in the preparation I use RunJavaScript action to run it.

Now for some results:
  • Google Chrome: editor works ok; no debug errors in developer tools;
  • IE: no editor;  I get this message "An exception occurred in the client script. Error: Erro em tempo de execução desconhecido"; no errors in the console; 
  • Firefox: no editor ; no errors in Firebug

All the text typed in the text area isn't saved in DB.


Cheers,
J.Heleno
Hi João,

I have no idea on how to achieve what you're looking for, but there's one thing I may add from experience: IE is very picky when it comes to messing with the DOM document before the page is fully loaded - and, in some versions, even after it is fully loaded.

As such, the headID.appendChild(newScript); is probably what's causing all the trouble. If I recall correctly, you have to wait 'til the document is in a ready state.

I hope this helps.

Regards,

Paulo Tavares