2009-08-23 7 views
4

setContent habe ich eine Website, die ich gesagt:TinyMCE funktioniert nicht mit Chrom, wenn ich dynamisch

<body onload="ajaxLoad()" > 

Ich habe eine Javascript-Funktion, die dann Daten aus meiner Datenbank in den Texteditor fügt durch die setContent mit JavaScript-Methode von das Textfeld. Es scheint gut in Firefox und IE, aber in Chrome manchmal nichts auftaucht. Es gibt keinen Fehler, nur einen leeren Editor.

Im Körperabschnitt habe ich:

<textarea id="elm1" name="elm1" rows="40" cols="60" style="width: 100%"> 
</textarea> 

Im Kopfteil habe ich:

function ajaxLoad() { 
     var ed = tinyMCE.get('elm1'); 
     ed.setProgressState(1); // Show progress 
     window.setTimeout(function() { 
      ed.setProgressState(0); // Hide progress 
      ed.setContent('<p style="text-align: center;"><strong><br /><span style="font-size: small;">General Manager&#39;s Corner</span></strong></p><p style="text-align: center;">August&nbsp;2009</p><p>It&rsquo;s been 15<sup>th</sup> and so have a Steak Night (Saturday, 15<sup>th</sup>) and a shore Dinner planned (Saturday, 22<sup>nd</sup>) this month. urday, September 5<sup>th</sup>. e a can&rsquo;t missed evening, shas extended it one additional week. The last clinic will be the week of August 11<sup>th</sup>. </p><p>&nbsp;Alt (Tuesday through Thursday) </p><p>&nbsp;I wouClub.</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;<strong></strong></p>'); 
     }, 1); 
    } 

Ich bin nicht sicher, ob seine etwas von der Formatierung, die Chrome zurückgewiesen wird, aber es scheint, wie Wenn TinyMCE es in einem Browser parsen kann, sollte es in jedem Browser möglich sein, so dass ich verwirrt bin.

Irgendwelche Vorschläge?

+0

Können Sie bitte die von Ihnen verwendeten TinyMCE- und Chrome-Versionen angeben? Dies würde die Reproduktion des Problems erleichtern, insbesondere wenn es tatsächlich eine Korrelation zwischen der DOM-Implementierung von Chrome und den Anforderungen von TinyMCE geben würde, die in meiner Antwort vermutet werden (http://stackoverflow.com/questions/1318291/tinymce-not-working-with-chrome) -when-ich-dynamisch-setcontent/1397118 # 1397118). –

+0

tinymce 3.2.5 chrome beta channel – leora

+0

hast du das auf windows gelöst? Ich meine nicht das Onload-Problem .. nur der Einsatz in Chrom. – dyoser

Antwort

9

Hintergrund:

Aus verschiedenen Gründen onload() nicht den richtigen Ansatz für das Laden Javascript in Betracht gezogen wird, siehe zum Beispiel Launching Code on Document Ready, mit den wichtigsten/spürbar einem Wesen, dass Javascript-Code ausgeführt wird, nicht, bis die Seite hat Das Herunterladen wurde komplett abgeschlossen, einschließlich Bildern und Ähnlichem, was eine Ewigkeit dauern könnte (zB wenn ein externer Banner-Ad-Server heruntergefahren ist usw.).

Stattdessen wird empfohlen, Javascript zu laden, sobald die DOM bereit ist, aber leider gibt es keine Cross-Browser-kompatible native Lösung dafür, siehe Getting notified when the page DOM has loaded (but before window.onload); Bitte beachten Sie, dass meine gesamte Antwort auf der besten Javascript-Bibliothek jQuery basiert, die eine cross browser solution for this problem bietet, folglich würde ich definitiv die zwei höher gewählten Antworten über die akzeptierte Lösung selbst bevorzugen.

Wahrscheinliche Ursache:

Ihr Problem scheint allerdings durch das entgegengesetzte Verhalten verursacht werden: Chrome erleichtert die WebKit-Rendering-Engine, genau wie Safari, und für letztere onload() wird sich anders verhalten diskutiert, siehe Abschnitt Wann brennt es? in Is Safari faster?. Eine weitere Beschreibung dieses Chrome-spezifischen Problems finden Sie in window.onload not working correctly in Chrome, ohne eine Erklärung jedoch.

Abschließend vermute ich onload() zu feuern, bevor das DOM tatsächlich vollständig geladen wird, zumindest in Bezug auf die Anforderungen von TinyMCE, die bei solchen Problemen notorisch fragil ist und einfach aufhört zu laden.

Mögliche Lösung:

Gerade Attribut erleichtert defer auf dem script Tag wie in window.onload not working correctly in Chrome umrissen ist wieder nicht Cross-Browser-kompatibel, daher würde ich gehe einfach mit dem weit verbreiteten und bewährten Ansatz der bereits erwähnten Verwendung jQuery cross browser solution for the onload() problem, das ist sowieso eine gute Praxis und sollte im Prinzip auch für Ihr umgekehrtes Problem sorgen.


Update:

Es gibt in der Tat einige gegen WebKit eingereicht Fehler, die meine Schlussfolgerung zurück konnte (egal, ob dieses Verhalten stellt tatsächlich einen Fehler oder ist beabsichtigt), siehe:

+1

sicher, es ist ein Ansatz für das Problem onload ... aber das setContent-Verhalten funktioniert immer noch nicht für Chrome auf Windows. (neueste Versionen von beiden) mit der Methode tiny.get ("editor1"). setContent ('content'). FF7 meldet das gleiche Problem auf Windows-System (nicht in Linux) nervig. – dyoser

+1

Dies gilt wahrscheinlich nicht direkt, aber ich arbeitete auf einer älteren Website, die im IE funktionierte, aber nicht in FF oder Chrome SetContent. Es stellte sich heraus, dass es wegen einer veralteten jQuery-Bibliothek im Projekt war. Ich habe das aktualisiert und es funktioniert jetzt perfekt - hoffe, dass jemand da draußen hilft! – deebs

3

Ich hatte ein ähnliches Problem (Editor nicht in Chrome angezeigt) und lesen in einem Forum, dass, wenn tinyMCE einige Dateien nicht finden kann, es einfach aufhört zu laden. Versuchen Sie herauszufinden, ob alles gefunden wurde, indem Sie den Tab des Firebugs benutzen (löschen Sie zuerst Ihren Cache).

+0

Danke ... habe meinen Tag gerettet –

+0

Danke. (aus Versehen) Ich habe diese Zeile im Setup verwendet: content_css: "http://www.tinymce.com/tryit/css/example.css", Scheinbar existiert diese Datei nicht mehr und TinyMCE hat aufgehört zu arbeiten Chrome und Safari. Ich habe diese Zeile auskommentiert und alles funktioniert gut in Webkit-Browsern. –

2

Zunächst einmal; Achten Sie darauf, dass Sie die neueste Version von TinyMCE haben.

Ich konnte Ihr Problem aufgrund der von Ihnen bereitgestellten Informationen nicht reproduzieren. Es scheint gut zu sein (mit der gefälschten Ajaxload).

Sie könnten immer versuchen, den "Hintereingang" zu gehen;

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>"; 

Hoffen Sie viel Glück!

0

gleiches Problem hier muss also

var ed = tinyMCE.get('content'); 
ed.setContent('zzz'); 

anderen Browser

document.getElementById("content").innerHTML="zzz"; 

ich bin ziemlich enttäuscht

wird Browser in JavaScript überprüfen müssen, um es richtig funktioniert zu bekommen, thats istxx

1

Es gibt einige Möglichkeiten, Inhalt in einem TinyMCE-Editor zu setzen. Wenn der Inhalt beim ersten Laden der Seite vorhanden sein soll, können Sie ihn einfach zwischen die Tags einfügen.

Andernfalls können Sie dies durch Skript auf folgende Weise tun:

window.onload = function() {

tinyMCE.getInstanceById ("Profil-") setContent ('test');.

};

Ich habe den Code in einem window.onload Block verpackt. Wenn Sie andere Funktionen haben, die den Inhalt auf diese Weise dynamisch setzen, nachdem der TinyMCE-Editor bereits geladen wurde, brauchen Sie das nicht.

2

LÖSUNG:

Ive mit der TinyMCE Symbolleiste kämpfen nicht in allen Arten von secnarios erscheinen .... wäre es in einem Benutzer-IE-Browser arbeiten, aber nicht eine andere. Es würde nicht in Firefox oder Chrome usw. funktionieren.

Stellt sich heraus, wenn in der neuesten Version 3.3 STILL Bugs sie nicht behoben haben.Dieser tritt auf, wenn in Ihrer Webseite JavaScript-Code, in dem Sie den TinyMCE instanziiert, wenn Sie Code für das Plugin Teil hinzugefügt, wo Sie zwei spezielle Plugins laden, schlägt der Symbolleiste angezeigt und Sie sehen, 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**", 

entfernen Sie alle Verweise auf imagemanager und filemanager in Ihrer Web-Seite, dann aktualisieren Sie Ihren Browser ...

Wenn Sie das tun, Retest in Chrome und Firefox und IE und der TinyMCE erscheint plötzlich! Wow .... ein Wunder, nicht wahr?

Stellt sich heraus, dass ihr "Hauptentwickler" das Problem nicht behoben hat, aber es als solches erklärt, wenn Sie versuchen möchten, immer noch diese Plugins zu verwenden und das Problem dennoch zu beheben. Sein Zitat ist wie folgt:

„Wenn die Imagemanager/Filemanager sind alt sie nicht die neue scriptloader api verwenden könnten, und die neue Version 3.3 werden alle abhängigen Skripte laden async statt Sync - Spocke - Main.. Entwickler von TinyMCE“

+1

Für mich löschen "Moxiemanager" den Trick. Funktionierte vorher nicht in Chrome und Firefox. Jetzt tut es das. – KJS

1

Es gibt eine Option oninit für die Funktion tinyMCE.init(), setzen Sie Ihre Methode gibt:

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

Es funktioniert diese Weg.

Der Editor ist nicht vollständig auf document load Ereignis geladen, wie es der Editor Loader wird eine Reihe von Dateien nachladen.