TinyMCE mit AJAX (Update Panel) hat nie einen Wert

9

Ich wollte einen Rich Text Editor für einen Textbereich in einem Update-Panel verwenden.

Ich habe diesen Beitrag gefunden: Ссылка über diese Frage: Benötigen Sie ASP.Net/MVC Rich Text Editor

Ich habe mich entschieden, mit TinyMCE zu arbeiten, wie ich es vorher in Nicht-AJAX-Situationen verwendet habe, und es steht in dieser Liste, dass es AJAX-kompatibel ist. Okay, ich mache das gute alte ' tinyMCE.init({ //settings here }); Testen Sie es und es verschwindet nach einem Update-Update. Ich entscheide hier von einer Frage, dass es in der Funktion page_load sein sollte, so dass es auch bei asynchronen Postbacks ausgeführt wird. Okay, das und das Panel bleibt. Beim Versuch, den Wert aus meinem Textfeld zu übermitteln, wird der Text jedoch immer als leer zurückgegeben, da mein Formularvalidator immer "Ich muss eine Beschreibung eingeben" anzeigt, auch wenn ich Text hineinlege. Dies geschieht beim ersten Laden der Seite und nach dem Ausführen von asynchronen Postbacks auf der Seite.

Okay, ich finde das Ссылка und Kann nicht zweimal aus der gleichen AJAX TinyMCE-Textstelle posten. Ich versuche, diesen Code direkt nach dem tinyMCE.init in meine Seitenladefunktion einzufügen. Dadurch bricht alle meine jQuery auch in der page_load nach ihm, und es hat immer noch das gleiche Problem.

Ich bin immer noch ziemlich Anfänger auf Client-Seite Scripting Sachen, also muss ich vielleicht den Code an einer anderen Stelle als page_load setzen? Ich bin mir nicht sicher, ob die Posts, die ich verlinkt habe, nicht genau wussten, wo ich den Code ablegen soll.

Mein Javascript:

%Vor%

Jetzt hat mein aktueller Code nicht die tinyMCE.execCommand("mceAddControl",true,'content'); , die diese eine Frage angegeben hat, sollte ebenfalls hinzugefügt werden. Ich habe versucht, es hinzuzufügen, aber ich war mir nicht sicher, wo ich es hinstellen sollte und es einfach in page_load zu setzen schien keine Wirkung zu haben.

Textfeldsteuerung:

%Vor%

Wie kann ich diese Werte erhalten, so dass der dahinter stehende Code tatsächlich das bekommen kann, was in den Textbereich geschrieben wurde und mein Validator nicht als leer angezeigt wird? Auch nach asynchronen Postbacks, da ich mehrere Buttons auf dem Formular habe, die es vor der eigentlichen Einreichung aktualisieren.

Danke!

Edit: Zur weiteren Klärung habe ich eine Formularvalidierung am Backend wie folgt:

%Vor%

Und dieser Fehler wird immer dazu führen, dass die Fehlermeldung angezeigt wird.

Bearbeiten:

Okay, ich bin verzweifelt hier, ich habe Stunden damit verbracht. Ich fand schließlich, was ich dachte, ein Gewinner auf Expertenaustausch zu sein, der das folgende sagt (es gab einen Teil über das Kodieren des Wertes in xml, aber ich übersprang das): Ссылка

  

Für jeden, der tinyMCE mit AJAX.Net verwenden möchte:

  1. Append-Anfangs- / Ende-Handler an das AJAX-Request-Objekt anhängen. Diese werden das tinyMCE-Steuerelement entfernen, bevor die Daten gesendet werden (begin), und es wird das tinyMCE-Steuerelement (Ende) neu erstellt:

    %Vor%
  2. Wenn der Benutzer das tinyMCE-Steuerelement ändert / verwischt, möchten wir sicherstellen, dass das Textfeld / Textfeld ordnungsgemäß aktualisiert wird:

    %Vor%

Jetzt habe ich diesen Code ausprobiert, indem ich ihn in sein eigenes Skript-Tag gesetzt habe, die Start- und End-Anfragen in seine eigenen Skript-Tags gesetzt und ed.onChange in page_load gesetzt habe, alles in page_load gesetzt und alle drei in das s gesetzt habe eigenes Skript-Tag In allen Fällen hat es nie funktioniert, und sogar manchmal brach die Jquery, die auch in meiner page_load ... ist (und ja, ich habe den obigen Code geändert, um meine Seite anzupassen)

Kann jemand das zur Arbeit bringen oder eine Lösung anbieten?

Der Code

    
SventoryMang 12.05.2010, 17:03
quelle

5 Antworten

0

Nun, es gab zwei Möglichkeiten, wie ich das zum Laufen brachte, was das Problem wirklich nicht behob, nur um es zu vermeiden.

Man sollte den FCKeditor .net control verwenden, der für mich, wie für 2-3 Sekunden, schrecklich langsam neu geladen wurde. Also entschied ich mich dafür, das Formular mit zwei Aktualisierungsfenstern zu versehen und den Textbereich dazwischen zu setzen, um den Textbereich im Wesentlichen aus dem Aktualisierungsfenster zu entfernen. Das fühlte sich irgendwie wie ein billiger Trick an, der nicht notwendig sein sollte, aber es funktioniert gut. Keine der Lösungen oder Vorschläge, die jemand gepostet hat, hat für mich funktioniert, also habe ich das gemacht. Wenn ich allerdings den Textbereich in das Update-Panel stellen müsste, hätte das nicht funktioniert.

    
SventoryMang 26.05.2010, 18:31
quelle
2

Ich denke, dass Sie sich diesen Beitrag ansehen möchten: Wie funktioniert TinyMCE in einem UpdatePanel?

>

Stelle sicher, dass du init function mit scriptmanager

registrierst %Vor%     
Glennular 13.05.2010 18:42
quelle
2

Ich möchte nur meine Lösung zu diesem Beitrag hinzufügen, da ich ein paar Tage mit dem gleichen Thema gerungen habe. Ich weiß, dass dies ein alter Beitrag ist, aber vielleicht hilft meine Antwort jemandem, da ich glaube, dass die Frage immer noch relevant ist.

Ich entwickle eine ASP.NET-Webformularanwendung und eine der Seiten enthält ein Textarea-Steuerelement, das in einem UpdatePanel enthalten ist. tinyMCE bindet an diesen Textbereich. Der Text für das Textfeld stammt aus einem gebundenen Textfeld in einem Repeater-Steuerelement, da ich den Text von einem ObjectDataSource-Steuerelement abrufen möchte, und dies ist eine leicht verständliche Methode. Meiner Meinung nach sind ObjectDataSource-Steuerelemente bequem und sie werden schnell ausgeführt.

Hier ist mein Markup, das das ObjectDataSource-Steuerelement, den Repeater, das gebundene Textfeld und das Textarea enthält (ein Asp: TextBox, das auf Multiline festgelegt wird). Beachten Sie, dass das gebundene Textfeld auf "display: none" festgelegt ist:

%Vor%

Ich habe auch eine asp: Schaltfläche zum Speichern von Text in tinyMCE zu SQL Server. Alle diese Steuerelemente sind in einem UpdatePanel enthalten.

Ich habe meinen gesamten jQuery- und JavaScript-Code in einer separaten Datei gespeichert. Ich füge die relevanten Bits unten hinzu. Als Überblick:

  • Ich initiiere tinyMCE im JavaScript pageLoad-Event. Beachten Sie, dass dieses Ereignis für vollständige und teilweise (asynchrone) Postbacks ausgelöst wird, sodass tinyMCE immer angezeigt wird und zwischen vollständigen oder teilweisen Postbacks nicht verschwindet.

  • Auch im pageLoad-Ereignis beginne ich, wenn ein Postback asynchron ist, auf ein BeginRequest-Ereignis, das vom ASP.NET PageRequestManager ausgelöst wird. Ich höre auf das BeginRequest-Ereignis im JavaScript pageUnload-Ereignis. Dies verhindert, dass mehr und mehr Listener jedes Mal hinzugefügt werden, wenn pageLoad ausgelöst wird.

  • Wenn der Ereignishandler für das BeginRequest-Ereignis ausgelöst wird (wenn die Schaltfläche "Speichern" auf meiner Seite angeklickt wird), erhalte ich den HTML-Inhalt des tinyMCE-Texteditors und speichere ihn in einem Cookie. Ich benutze das jQuery-Cookie-Plugin, um dies zu tun: Ссылка . Der HTML-Code ist zur Sicherheit im Cookie enthalten.

  • Nun wird im Servercode, der beim Klicken auf die Schaltfläche Speichern ausgeführt wird, der Text des Cookies (der ein codiertes HTML ist) abgerufen und auf dem SQL-Server gespeichert. Der Cookie ist jetzt gelöscht.

  • ASP.NET bindet die gespeicherten Daten über das ObjectDataSource-Steuerelement an die ausgeblendete Textobx, der Wert des Textarea-Steuerelements wird an die verborgenen Textfelder und der Teil der Seite im UpdatePanel wird an den Browser zurückgegeben.

  • tinyMCE zeigt diesen Text jetzt aus dem Textfeld an, aber er ist in HTML codiert und nicht von Menschen lesbar.

  • Also formatiere ich den tinyMCE-Text im JavaScript pageLoad-Event, indem ich den HTML-Code entziffere.

  • Arbeit erledigt!

Hier sind die relevanten Teile meiner Skriptdatei:

%Vor%

Hier ist ein Teil des Servercodes, der beim Klicken auf die Schaltfläche Speichern ausgelöst wird:

%Vor%

Hoffe das hilft jemandem.

    
pgn 04.11.2011 16:37
quelle
1

Sie müssen die Speicherfunktion beim Zurücksetzen auslösen, verwenden Sie dazu Page.RegisterOnSubmitStatement um das Skript tinyMCE.triggerSave();

zu registrieren

Ich habe festgestellt, dass die Funktion init von tinyMCE nur aufgerufen werden kann, wenn alle Text- oder Textbereiche einer bestimmten Klasse ausgewählt werden. Das exact funktioniert nicht.

    
BrunoLM 17.08.2010 13:18
quelle
0

Eine Sache, die mir beim Einfügen von TinyMCE in ein Update-Panel auffiel, war, dass ich alle möglichen Tricks machen musste, damit es richtig funktionierte. Denken Sie daran, wie das Update-Panel funktioniert, wenn Sie es aktualisieren möchten, ersetzt es vollständig das DOM darin, einschließlich des TinyMCE.

Die von mir verwendete Problemumgehung bestand darin, das TinyMCE aus dem Update-Fenster zu entfernen und alles, was in einem Update-Fenster dynamisch aktualisiert werden musste, einzubinden. Ich würde dann Daten über die JavaScript-API zu TinyMCE hinzufügen, wenn der TinyMCE-Inhalt dynamisch ist.

    
Jonathan S. 26.05.2010 19:38
quelle