Hackerboard WikiHaboBlog

[HaBo]

 
(Web-) Design und webbasierte Sprachen Tipps & Tricks, Designabgleich, HTML & Javascript, Flash, ASP, PHP, Perl/CGI...

Ajax Problem mit TinyMCE

Diskussion: Ajax Problem mit TinyMCE im Forum (Web-) Design und webbasierte Sprachen, in der Kategorie Web, Network & Multimedia Palace; Hallo! Seit geraumer Zeit stehe ich hier vor einem Problem, dass ich anscheinend nicht selbst lösen kann. Ich habe ein ...

Antwort
Alt 02.03.10, 15:47   #1 (permalink)
 
Registriert seit: 29.03.07
Maulwurf Leistung: Facit NTK
Maulwurf eine Nachricht über ICQ schicken
Likes: 0
Standard Ajax Problem mit TinyMCE


Hallo!

Seit geraumer Zeit stehe ich hier vor einem Problem, dass ich anscheinend nicht selbst lösen kann. Ich habe ein Formular in dessen Textfeld ich im Nachhinein per Javascript den Editor laden kann. Mache ich dies, wird der Inhalt aber nicht mehr übergeben. Lasse ich es sein, geht das. Also was ich meine ist dies:

Formular:

HTML-Code:
<a href="javascript:load_tinymce();">Load TinyMCE</a>

<form id="insert_content" method="post" action="javascript:form_submit();">

<p>Überschrift Deutsch: <input id="caption_de" type="text"></p>
<p>Überschrift Englisch: <input id="caption_en" type="text"></p>


DER Inhalt AUF DEUTSCH!
<textarea id="content_de" name="content_de" style="width:100%">
</textarea>

<br />
<input id="new_content" type="submit" value="TEST">

</form>
Das Javascript dazu:

Code:
//BEGINN TINYMCE
function load_tinymce() {
    tinyMCE.init({
    // General options
    mode : "textareas",
    theme : "advanced",
    file_browser_callback : "tinyBrowser",
    language : "de",
    plugins : "safari,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",

    // Theme options
    theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
    theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
    theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
    theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true,

    // Example content CSS (should be your site CSS)
    content_css : "css/example.css",
     

    // Drop lists for link/image/media/template dialogs
    template_external_list_url : "js/template_list.js",
    external_link_list_url : "js/link_list.js",
    external_image_list_url : "js/image_list.js",
    media_external_list_url : "js/media_list.js",

 

    // Replace values for the template plugin

        template_replace_values : {

        username : "Some User",

        staffid : "991234"

        }

    });
}
//////////// ENDE TINYMCE



//BEGINN DES AJAX POSTENS
$(document).ready(function(){  
     $("form#insert_content").submit(function() {  
     
     // deactivate submit button
     $("#new_content").attr("disabled","disabled");
     $("#insert_content").hide();
     $("#working").show();
     
     // we want to store the values from the form input box, then send via ajax below  
     var caption_de     = $('#caption_de').attr('value');  
     var caption_en     = $('#caption_en').attr('value');
     var text_de        = $('#content_de').attr('value');
         
     $.ajax({  
             type: "POST",
             url: "ajax/new_content_CHECK.php",
             data: "caption_de="+ caption_de +"&caption_en="+ caption_en +"&text_de="+ text_de,
             success: function(msg) {
                    if(msg == 1) {
                        $("#php_error").hide();
                        senddata(text_de, caption_de, caption_en);
                    } else {
                        $("#php_error").html(msg); // Fehlermeldung anzeigen lassen
                        $("#php_error").show();
                        
                        
                        $("#new_content").removeAttr("disabled");
                        $("#working").hide();
                        $("#insert_content").show();
                        $("#info_bad").html('ERROR');
                        $("#info_bad").slideDown();
                        setTimeout('hideinfo_bad()', 3000);    
                    }
                }
         });
         
     return false;
     })  
});  



function senddata(text, name_de, name_en) {
         $.ajax({  
             type: "POST",
             url: "ajax/new_content_insert.php",  
             data: "caption_de="+ name_de +"&caption_en="+ name_en +"&text_de="+ text,
         });
         
         $("#working").hide();
         $("#success").fadeIn();
         $("#info_good").html("Alles in Ordnung");
         $("#info_good").slideDown(1000),
         setTimeout('hideinfo_good()', 3000);
}


 function form_submit() {

 }

 
</script>
Ich benutze JQuery um den Inhalt per Ajax erst an die new_Content_CHECK.php zu übergeben welche alles auf Richtigkeit überprüft (fragt mich nicht warum aber ich finde es angenehmer Benutzereingaben in PHP zu überprüfen). Falls die Antwort dieser Datei nur "1" ist (was es im Moment zu Testzwecken durch ein simples "echo 1"; immer ist), geht es weiter mit der Funktion senddata. Die speichert die Daten dann in meine MySQL Datenbank.

Das ganze Ajax ansich funktioniert wunderbar (danke hier an das jQuery Team ) ABER sobald, ich auf den Link "LoadTinyMCE" klicke um den Editor zu laden wird dessen inhalt dann nicht mehr weitergegeben. In der Datenbank landen dann nur noch die Werte für "caption_de" und "caption_en".

Gerade habe ich auch versucht den Editor nicht im nachhinein zu laden, sondern direkt so anzubieten. Auch dann werden die Daten im Textfeld "vergessen".

Ich weiß das ist jetzt recht viel Text gewesen , aber womöglich hat einer von euch ne Idee?


Vielen Dank,
Maulwurf

EDIT: OK, jetzt bin ich komplett weg????

Ich habe nocheinmal alles ausprobiert und jetzt erscheint in der Datenbank bei "content_de" immer "undefined", wenn ich den Editor benutze. Sobald ich Sonderzeichen wie "&" versuche zu speichern geht es nicht mehr - so wie bei Umlauten.

ABER im moment speicher ich die Informationen mit folgendem PHP-Skript:

(ich weiß: unsicher.... aber ist ja alles im moment nur in der fehlerfindung)
PHP-Code:
# // CLIENT INFORMATION  
     
$caption_de        $_POST["caption_de"];  
     
$caption_en        $_POST["caption_en"]; 
     
$text_de           $_POST["text_de"];
     

     
$columns = array("text_de""caption_de""caption_en");
$data = array($text_de$caption_de$caption_en);
mysql_insert("content_pages"$columns$data); 
Das sollte sich doch im Moment zumindest gänzlich gar nicht um Umlaute scheren???


und die mysql_insert funktion war einer meiner glanzleistungen

PHP-Code:
function mysql_insert($row$column$set) {
    if(
reject_sql($set)) {
        echo 
$LANG_XSS_WARNING;
        die();
    } else {
        if(
is_array($set)) {
            
$i 0;
            while(
$i count($set)) {
                
$set[$i] = mysql_real_escape_string($set[$i]);  //mysql abfrage sichern
                
$i++;
            }
        } else {
            
$set mysql_real_escape_string($set);
        }    
        if(
is_array($set)) {
            
$sql "INSERT INTO ".$row." (".$column[0]."";
            
$i 1;
            while(
$i count($set)) {
                
$sql $sql.", ".$column[$i]."";
                
$i++;
            }
            
$sql $sql.") VALUES ('".$set[0]."'";
            
$i 1;
            while(
$i count($set)) {
                
$sql $sql.", '".$set[$i]."'";
                
$i++;
            }
            
$sql $sql.")";
        } else {
            
$sql "INSERT INTO ".$row." (".$column.") VALUES ('".$set."')";
        }
        
        
$db mysql_query($sql);
        return 
$db;
    }


Geändert von Maulwurf (02.03.10 um 16:02 Uhr)
Maulwurf ist offline   Mit Zitat antworten
Alt 02.03.10, 16:46   #2 (permalink)
 
Benutzerbild von BasicAvid
 
Registriert seit: 17.03.04
BasicAvid Leistung: Facit NTK
Likes: 1
Standard

Könnte es vielleicht daran liegen?

Code:
var text_de = $('#content_de').attr('value');
Falls jquery hier ein Attribut mit dem Namen Value sucht, scheitert dass natürlich daran, dass Textareas kein value-Attr haben.

Probier es mal so:

Code:
var text_de = $('#content_de').val();
//oder
var text_de = $('#content_de').value();
Kenn mich mit JQuery nicht wirklich aus, deshalb musst mal gucken wie man den Value eines Input/Textarea abruft.
__________________
Mfg Basic Avid
- Use it or be used! -
BasicAvid ist offline   Mit Zitat antworten
   
HaBOT
 

Werbung ist gerade online    
Alt 02.03.10, 16:58   #3 (permalink)
Themenstarter
 
Registriert seit: 29.03.07
Maulwurf Leistung: Facit NTK
Maulwurf eine Nachricht über ICQ schicken
Likes: 0
Standard

Zitat:
Zitat von BasicAvid Beitrag anzeigen
Könnte es vielleicht daran liegen?

Code:
var text_de = $('#content_de').val();
//oder
var text_de = $('#content_de').value();
Ich habe meinen Beitrag oben editiert, da es bei "normalen text" ohne jegliche Umlaute und sonderzeichen funktioniert. Dennoch habe ich deine zwei Versionen überprüft. Das zweite geht genauso, das erste nicht.

ABER wo ist mein Fehler, dass keine Sonderzeichen übernommen werden? Ist das ein Javascript Problem oder liegt es in meiner php implementierung?

Denn wenn ich "&auml;" wegen dem "&" nicht abspeichern kann, oder aber jegliche anführungsstriche "" abgewiesen werden, bringt der ganze tinymce aufbaue nichts.

Anscheinend hatte ich beim testen immer quer über die tastatur gelangt und somit immer gleich sonderzeichen getestet

Maulwurf
Maulwurf ist offline   Mit Zitat antworten
Alt 02.03.10, 17:16   #4 (permalink)
 
Benutzerbild von BasicAvid
 
Registriert seit: 17.03.04
BasicAvid Leistung: Facit NTK
Likes: 1
Standard

Zitat:
Ich habe nocheinmal alles ausprobiert und jetzt erscheint in der Datenbank bei "content_de" immer "undefined", wenn ich den Editor benutze. Sobald ich Sonderzeichen wie "&" versuche zu speichern geht es nicht mehr - so wie bei Umlauten.
Ein "undefined" kommt von Javascript, ich würde mal testen was bei Deinen Ajax-Requests übergeben wird.

Und das ganze vielleicht per POST senden, Du musst dann natürlich folgendes mit Deiner Form machen $(formname).serialize(). Den serialisierten String übergibst Du dann einfach als data.

Ach ja, und es würde auch noch die Funktionen encodeURIComponent und encodeURI geben.
__________________
Mfg Basic Avid
- Use it or be used! -
BasicAvid ist offline   Mit Zitat antworten
Alt 03.03.10, 10:05   #5 (permalink)
Themenstarter
 
Registriert seit: 29.03.07
Maulwurf Leistung: Facit NTK
Maulwurf eine Nachricht über ICQ schicken
Likes: 0
Standard

Ok, heute morgen bin ich ein ganzes Stück weiter, aber perfekt ist es noch nicht

Der Tipp mit encodeURIComponent war sehr gut, danke dafür. Ich verschlüssele damit meine Daten und Sonderzeichen wie "&" etc. werden nun korrekt übertragen.
Zusätzlich benutze ich php-Seitig folgenden Code:

PHP-Code:
function correct_str($myString) {
$myString=ereg_replace(chr(0xc3).chr(0xa4),'ä',$myString);
$myString=ereg_replace(chr(0xc3).chr(0x84),'Ä',$myString);
$myString=ereg_replace(chr(0xc3).chr(0xb6),'ö',$myString);
$myString=ereg_replace(chr(0xc3).chr(0x96),'Ö',$myString);
$myString=ereg_replace(chr(0xc3).chr(0xbc),'ü',$myString);
$myString=ereg_replace(chr(0xc3).chr(0x9c),'Ü',$myString);
$myString=ereg_replace(chr(0xc3).chr(0x9f),'ß',$myString);
return 
$myString;

um aus dem vom Javascript übergebenen String wieder korrekte Umlaute zu generieren. Wenn ich jetzt eine html Tabelle "</>" mit leerzeichen "&;" und umlauten "&;" erstelle und direkt in das Textfeld eintrage wird diese nun komplett per ajax RICHTIG in die Datenbank übertragen

ABER... sobald ich per
HTML-Code:
<a href="javascript:load_tinymce()">LoadTinyMCE</a>
wie im ersten Püost beschrieben den Editor lade und in diesem die Tabelle erstelle erscheint wieder ein "undefined" in der Datenbank. Dies geschieht auch nur wenn ich einen Umlaut in den editor eingebe. Wie gesagt... lasse ich den weg, funktioniert alles.

Kennt sich hier noch jemand mit tinymce aus oder weiß woran sich dieser nun stört? Er zeigt mir ja während des editierens alles richtig an

Maulwurf

Geändert von Maulwurf (03.03.10 um 10:05 Uhr) Grund: [PHP]-tags eingefügt
Maulwurf ist offline   Mit Zitat antworten
Alt 03.03.10, 14:00   #6 (permalink)
 
Benutzerbild von BasicAvid
 
Registriert seit: 17.03.04
BasicAvid Leistung: Facit NTK
Likes: 1
Standard

Also ich habe jetzt mal Deinen Code getestet, und bei mir kommen die Daten einwandfrei an.

Ich benutze auf Client-Seite encodeURIComponent() und auf PHP-Seite urldecode().

Ich würde auf jedenfall mal ein paar Debug Ausgaben einbauen, z.B. vor dem Ajax-Request und vielleicht noch den folgenden Link einfügen.

HTML-Code:
<a href="#" onclick="alert($('#content_de').attr('value'));">Der  Text</a>
Somit kannst Du leicht überprüfen ob die Daten vor dem absenden noch korrekt sind.

Ach ja, ein "undefined" kommt meist davon, wenn versucht wird auf eine Eigenschaft oder ein Attribut eines Elements zuzugreifen welches es nicht gibt.
__________________
Mfg Basic Avid
- Use it or be used! -
BasicAvid ist offline   Mit Zitat antworten
Alt 03.03.10, 15:33   #7 (permalink)
Themenstarter
 
Registriert seit: 29.03.07
Maulwurf Leistung: Facit NTK
Maulwurf eine Nachricht über ICQ schicken
Likes: 0
Standard

Wunderbar, vielen Dank

Jetzt geht es. Es bleibt nur noch eine merkwürdige Sache. In der Datenbank landen nun die Inhalte genauso in html, wie tinymce sie auch erstellt. Dein Tipp mit urlencode und encodeURIComponent waren genau richtig.

Zusätzlich hab ich im Internet noch gefunden, dass ich im Ajax aufruf einmal

tinyMCE.triggerSave();

aufrufen muss, da ich ja den normalen "submit-prozess" umgehe. Während diesem "speichert" tinymce aber erst die Daten, sodass man das manuell aufrufen muss.

Jetzt das merkwürdige, wenn das noch gelöst wird ist es perfekt .... Ich lade die Seite, geb zig umlaute, sonderzeichen etc ein und speicher - geht . Wenn ich nun per F5 die Seite neulade und wieder etwas eingebe geht dies auch. ABER wenn ich die Daten absende, dann per ajax eine andere seite lade und anschließend wieder per ajax das formular lade (browser wurde nicht refreshed, aber das ajax- und tinymce-javascript wird neugeladen, da dies in der per ajax geladenen datei ist), erscheint nun "undefined" als text_de, während caption_de normal übertragen wird.
Das verstehe ich nicht?


so sieht das aus

HTML-Code:
<head>
...

    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.8rc3.custom.min.js" type="text/javascript"></script>

    <script src="tiny_mce/tiny_mce.js" type="text/javascript"></script>
...
    <script type="text/javascript">

    function ajax_request(id) {
      $('#ajax_content').html('<div align="center"><p><img src="http://www.hackerboard.de/images/ajax-loader.gif" width="220" height="19" /></p></div>');
      $('#ajax_content').load("ajax_content.php?switch="+ id +"");
    }
</script>
...
</head>
<body>
...............
    <!-- Beginn des Contents -->
    <div id="ajax_content">
    Bitte warten, der Content wird geladen
    </div>
    <!-- Ende des Contents -->
..................
</body>
</html>
und das formular was ich reinlade hat das ganze restliche javascript drinnen - es geht ja auch, aber danach muss man die seite neuladen und kann nicht einfach <a href="javascript:ajax_request(FORMULAR)"> neu aufrufen, da sonst "text_de" als "undefined" übergeben wird. Anscheinend muss da irgendwas neu initialisiert werden, aber ich hab keine ahnung was das sein könnte.

Edit: alert(text_de) gibt beim ersten mal auch das richtige "dekodierte" aus, beim zweiten ajax aufruf aber dann auch nur noch "undefined".

Maulwurf

Geändert von Maulwurf (03.03.10 um 15:40 Uhr)
Maulwurf ist offline   Mit Zitat antworten
Alt 03.03.10, 16:39   #8 (permalink)
 
Benutzerbild von BasicAvid
 
Registriert seit: 17.03.04
BasicAvid Leistung: Facit NTK
Likes: 1
Standard

Das liegt daran, dass man nicht einfach Javascript nachladen kann. Es gibt im Netz ein paar Beispiele wie genau man vorgehen muss.

Es ist überhaupt notwendig, sogar die Javascripts nachzuladen? Warum erstellst Du Dir nicht einfach eine Klassen, welche Du in einem JS-File speicherst und einbindest?

Ajax war eigentlich nicht dafür gedacht, ganze Seiten nachzuladen.
__________________
Mfg Basic Avid
- Use it or be used! -
BasicAvid ist offline   Mit Zitat antworten
Alt 03.03.10, 17:07   #9 (permalink)
Themenstarter
 
Registriert seit: 29.03.07
Maulwurf Leistung: Facit NTK
Maulwurf eine Nachricht über ICQ schicken
Likes: 0
Standard

Ok, das war zugegebenermaßen ein wenig dumm von mir. Danke für die Hilfe, jetzt geht alles.
Ich verzichte darauf die komplett Seite per Ajax zu laden, sondern gestalte lediglich den Speichervorgang dynamisch.
Maulwurf ist offline   Mit Zitat antworten
Antwort
   

Werbung ist gerade online    

[HaBo] » Web, Network & Multimedia Palace » (Web-) Design und webbasierte Sprachen » Ajax Problem mit TinyMCE
Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks sind aus
Pingbacks sind aus
Refbacks sind aus



1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61