[Windows8][TinyMce] Why my textarea doesn’t exist ?

I recently tried to use a Wysiwyg editor in a Windows 8 application (XAML/C#) using a webview. I used it first in a blank template and it works well but when I tried to use it in an existant project, it failed.

Hey, my textarea is visible here !
Hey, my textarea is visible here !
Hey, why can't I type something ?
Hey, why can’t I type something ?

For an unknown reason, I wasn’t able to type any text in my editor. The code was the same in the two projects but in the second one, the zone where the textarea was supposed to be was empty. So I put my debugger in script mode to explore the DOM and maybe find what happened.

The iframe generated by the wysiwyg editor was empty, only the javascript code who was supposed to create the content was here. Seriously, why are you not working mister javascript function ? The context is the same as the other project ! After many hours of debbuging, I finally found the problem, and you know what ? It’s kinda ridiculous…

Empty iframe
Empty iframe
Correct iframe
Correct iframe

The tinymce.min.js file brought by Tinymce is providing the javascript code to create the content of the iframe in the init function. In this function, there is this line of code « document.domain != location.hostname && (u = v) » who is using the name of the application  to create our content, and in my case the application name was « app.test ».

This name is simple but contains a « . » which is the source of our error, indead the js encoding returns a « %2E » instead of the « . » for document.domain while the location.hostname really returned « app.test » (as you can see in the next screenshot). So, the code stops here and doesn’t generate our textarea. I haven’t inspect all the code but to fix the bug quickly, we can juste rename our projet or add a replace in the javascript function (document.domain.replace(« %2E », ». »);). And now everything works correctly !

 

Hope it helps !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *