TinyMCE not working with Chrome when I dynamically setContent

javascript google-chrome dom-events tinymce

22,233

Solution 1

Background:

For various reasons onload() is not considered the proper approach for loading Javascript, see for example Launching Code on Document Ready, with the most important/noticeable one being that Javascript code isn't run until the page has finished downloading entirely, including images and the like, which might take an eternity therefore (e.g. if an external banner ad server is down etc.).

Instead it is recommended to load Javascript as soon as the DOM is ready, but unfortunately there is no cross browser compatible native solution for this, see Getting notified when the page DOM has loaded (but before window.onload); please note that my entire answer is based upon the most excellent Javascript library jQuery, which offers a cross browser solution for this problem, consequently I'd definitely favor the two higher voted answers over the accepted solution myself.

Likely cause:

Your issue seems to be caused by the opposite behavior though: Chrome facilitates the WebKit rendering engine, just like Safari, and for the latter onload() is discussed to behave differently, see section When does onload fire? in Is Safari faster?. Another description of this problem specific to Chrome can be found in window.onload not working correctly in Chrome, without an explanation though.

In conclusion I suspect onload() to fire before the DOM is actually loaded completely, at least concerning the requirements of TinyMCE, which is notoriously fragile regarding issues like this and simply ceases to load.

Possible solution:

Just facilitating attribute defer on the script tag as outlined in window.onload not working correctly in Chrome is again not cross browser compatible, hence I'd simply go with the widely deployed and proven approach of using the already mentioned jQuery cross browser solution for the onload() problem, which is good practice anyway and should in principle take care of your inverse issue as well.

Update:

There are indeed some bugs filed against WebKit which could back my conclusion (no matter whether this behavior actually constitutes a bug or is intentional), see:

Solution 2

I had a similar problem (editor not showing in chrome) and read in some forum, that if tinyMCE is unable to locate some files, it just stops loading. Try tracking down if everything is found using firebug's net tab (clear your cache first).

Solution 3

First of all; see to it that you have the latest version of TinyMCE.

I could not reproduce your problem given the information you provides. It seems just fine ( with the faked ajaxload ).

You could always try to go the "back entrance" in;

var myed = document.getElementById('elm1_ifr');
myed.contentDocument.getElementById('tinymce').innerHTML="<p style=\"text-align: center;\"><strong>hacking <span style=\"font-size: small;\">my</span> way in.</strong></p>";

Hope you good luck!

Solution 4

SOLUTION:

Ive been struggling with the TinyMCE toolbar not appearing in all kinds of secnarios....it would work in one user's IE browser, but not another. It would not work in Firefox or Chrome, etc.

Turns out if in the newest 3.3 version there are STILL bugs they have not fixed. This one occurs when in your webpage JavaScript code, where you instantiate the TinyMCE, if you added code for the plugin part where you load up two specific plugins, the toolbar fails to appear and you see HTML: plugins:

"safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,
inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,
fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,**imagemanager,filemanager**",

Remove all references to imagemanager and filemanager in your web page, then refresh your browser...

When you do, retest in Chrome and Firefox and IE and the TinyMCE suddenly appears! Wow....a miracle, huh?

Turns out their "main developer" hasn't fixed the issue but does explain it as such, if you want to try and still use those plugins and yet fix the problem. His quote is as follows:

"If the ImageManager/FileManager are old they might not use the new scriptloader api. And the new 3.3 version will load all dependent scripts async instead of sync. - Spocke - Main developer of TinyMCE"

Solution 5

There is an option oninit for the function tinyMCE.init(), put your method there:

tinyMCE.init({
    oninit: function(){
        tinyMCE.activeEditor.setContent('blah');
    }
});

It works this way.

The editor is not fully loaded on document load event, as it the editor loader will post-load a bunch of files.

View more solutions

22,233

Author by

leora

Updated on July 23, 2021

Comments

leora almost 3 years
I have a site that I put:
```
<body onload="ajaxLoad()" > 
```
I have a Javascript function that then inserts data from my database into the text editor by using the setContent Javascript method of the textarea. It seems fine in Firefox and IE but in Chrome sometimes nothing shows up. There is no error, just a blank editor.

In the body section I have:
```
 <textarea id="elm1" name="elm1" rows="40" cols="60" style="width: 100%"> 
</textarea>
```
In the head section I have:
```
function ajaxLoad() {
 var ed = tinyMCE.get('elm1');
 ed.setProgressState(1); // Show progress
 window.setTimeout(function() {
 ed.setProgressState(0); // Hide progress
 ed.setContent(' General Manager&#39;s CornerAugust&nbsp;2009It&rsquo;s been 15th and so have a Steak Night (Saturday, 15th) and a shore Dinner planned (Saturday, 22nd) this month. urday, September 5th. e a can&rsquo;t missed evening, shas extended it one additional week. The last clinic will be the week of August 11th. &nbsp;Alt (Tuesday through Thursday) &nbsp;I wouClub.&nbsp;&nbsp;&nbsp;&nbsp;');
 }, 1);
 }
```
I am not sure if its some of the formatting that Chrome is rejecting but it seems like if TinyMCE can parse it in one browser, it should be able to do it in any browser, so I am confused.

Any suggestions?
- Steffen Opel over 14 years
 
 Could you please specify the TinyMCE and Chrome versions you are using? This would ease reproducing the problem, especially if there would in fact be a correlation between Chromes DOM implementation and TinyMCEs requirements as suspected in my answer (stackoverflow.com/questions/1318291/…).
- leora over 14 years
 
 tinymce 3.2.5 chrome beta channel
- Tony over 12 years
 
 have you solved this on windows? I mean not the onload issue.. just the insert in chrome.
Tony over 12 years

sure it's an approach to the onload issue... but the setContent behaviour still not work for chrome on windows. (latest versions of them both) using the method tiny.get("editor1").setContent('content'). FF7 reports the same problem on windows system (not in linux) annoying.
eye-wonder about 11 years

Thanks. (by mistake) I used this line in the in the setup: content_css : "tinymce.com/tryit/css/example.css", Apparently this file does no longer exist and TinyMCE stopped working i Chrome and Safari. I commented out this line and everything is working fine in webkit browsers.
KJS almost 11 years

For me deleting 'moxiemanager' did the trick. Didn't work in Chrome and Firefox before. Now it does.
deebs almost 9 years

This probably doesn't apply directly, but I was working on an older site that worked fine in IE but wouldn't setContent in FF or Chrome. Turns out it was because of an outdated jQuery library in the project. I updated that and it works perfectly now - hope that helps someone out there!