Wie erhalte ich die Eingabe eines TinyMCE-Editors, wenn ich das Front-End verwende?

8

Ich bin mir nicht sicher, warum ich das nicht finden konnte, aber weiß jemand, wie man die Eingabe des TinyMCE-Editors erhält? Ich verwende es im Frontend und möchte in der Lage sein, alles, was der Benutzer in TinyMCE eingegeben hat, in einer Datenbank zu speichern, kann aber nicht den besten Weg finden, um diesen Wert zu erfassen.

Die beiden Lösungen, die ich mit einigem Erfolg implementiert habe, sind:

  1. tinyMCE.activeEditor.getContent(); - Dieser scheint nur den Wert des visuellen Editors zu erhalten. Wenn ich also im HTML-Editor bin und Änderungen vornehme und dann speichere, werden sie nicht übernommen.

  2. $('#html_text_area_id').val(); - Dies ist das Gegenteil, es scheint nur den Wert des HTML-Editors zu erhalten.

Ich weiß, dass es einen besseren Weg gibt - ich kann ihn einfach nicht finden ...

ps Ja, ich werde Sicherheitsmaßnahmen implementieren, um sicherzustellen, dass Benutzer die Datenbank nicht in die Luft jagen können.

Sam
quelle
2
Wenn Sie tinyMCE initiieren, binden Sie es normalerweise an einen Textbereich. Verwenden Sie also einfach die ID dieses Textbereichs mit jQuery'sval()
Bainternet
Ja, das habe ich versucht, aber es erhält nur den Wert des HTML-Editors. Wenn ich mich im visuellen Editor befinde, nehmen Sie Änderungen vor und versuchen Sie zu speichern. Alle Änderungen, die ich im visuellen Editor vorgenommen habe, werden nicht gespeichert.
Sam

Antworten:

22

Ok, anscheinend verfolgt WordPress, welche Art von Editor (visuell oder HTML) als Klasse aktiv ist, die dem Content Wrapper hinzugefügt wird. Hier ist eine Lösung, mit der Sie die neuesten Inhalte im Editor erhalten

function get_tinymce_content(){
    if (jQuery("#wp-content-wrap").hasClass("tmce-active")){
        return tinyMCE.activeEditor.getContent();
    }else{
        return jQuery('#html_text_area_id').val();
    }
}
Bainternet
quelle
Hmm, interessante Idee. Ich werde das testen und berichten. Vielen Dank!
Sam
1
Hat perfekt funktioniert. Danke für Ihre Hilfe! Wenn ich genug Ruf hätte, würde ich darüber abstimmen.
Sam
Ich bin
2
Es hat lange gedauert, eine Antwort darauf zu finden. Ich brauchte auch eine Möglichkeit, den Inhalt festzulegen. Für den Fall, dass jemand anderes auch eine Möglichkeit zum Festlegen von Inhalten benötigt, finden Sie hier eine Übersicht über beide (get / set) Funktionen: gist.github.com/RadGH/523bed274f307830752c . Dies funktioniert auch mit benutzerdefinierten wp_editor-IDs, nicht nur mit den Standard-IDs.
Radley Sustaire
Viel Hilfe auch für mich;)
Vignesh Pichamani
1

Das ist der Code, den ich meinem Javascript unmittelbar vor dem Absenden des Formulars hinzugefügt habe.

// Find and loop through all TinyMCE editors.
jQuery('#the-form').find( '.wp-editor-area' ).each(function() {
    var id = jQuery( this ).attr( 'id' ),
        sel = '#wp-' + id + '-wrap',
        container = jQuery( sel ),
        editor = tinyMCE.get( id );

    // If the editor is in "visual" mode then we need to do something.
    if ( editor && container.hasClass( 'tmce-active' ) ) {
        // Saves the contents from a editor out to the textarea:
        editor.save();
    }
});
Philipp
quelle
1

Das hat bei mir funktioniert:

if (jQuery("#wp-description-wrap").hasClass("tmce-active")){
    description1 = tinyMCE.activeEditor.getContent( { format : 'html' } );
}else{
    description1 = jQuery('[name="description"]').val();

Wo Beschreibung die ID des Tinymce-Editors und der Code nach dem Anderen der akzeptierten Antwort ist, hat bei mir nicht funktioniert.

Alfredo Cebrián
quelle
Bitte erläutern Sie, wie es sich von der akzeptierten Antwort unterscheidet. Was für neue Infos. bieten Sie an?
Fayaz
0

Ich brauchte viel mehr Code, um es zum Laufen zu bringen, und bekam auch einen Javascript-Fehler: Deprecated TinyMCE API call: <target>.onKeyUp.add(..)Dies wurde durch ein WordPress-Upgrade von 3.x auf 4 verursacht. Also musste ich clear my browser cachezuerst.

Zuerst habe ich dem wp-Filter tiny_mce_before_initin meiner Datei functions.php einen Rückruf hinzugefügt. Dadurch konnte ich eine js-Rückruffunktion hinzufügen, die beim Initialisieren der Editoren ausgelöst wird:

add_filter( 'tiny_mce_before_init', array( $obj, 'filter_cb_mce_before_init' ) );

/**
 * Filter cb to add event listeners to tinymce editor.
 * @param  array $init An array of setup js functions as strings.
 * @return array       Returns new array of js function strings.
 */
function filter_cb_mce_before_init( array $init ) {
        $init['setup'] = "function(ed){
                if(get_tinymce_content)  //not required, I use it as flag to check if on correct page
                    ed.on('change', function(){ get_tinymce_content() });
            }";
        return $init;
    }

Als nächstes die Javascript-Funktion, um mit dem Inhalt zu tun, was immer gewünscht wird, wenn er sich ändert. Fügen Sie dieses Javascript mit wp_enqueue_scripts zu der gewünschten Seite hinzu.

  /**
   * Get the content of the tinyMCE editor.
   * @link http://wordpress.stackexchange.com/questions/42652/how-to-get-the-input-of-a-tinymce-editor-when-using-on-the-front-end
   * @return {string} Returns the content
   */
  function get_tinymce_content(){

    //change to name of editor set in wp_editor()
    var editorID = 'my_editor_id';

    if (jQuery('#wp-'+editorID+'-wrap').hasClass("tmce-active"))
        var content = tinyMCE.get(editorID).getContent({format : 'raw'});
    else
        var content = jQuery('#'+editorID).val();

    console.log(content);
}

Der Code funktionierte, als ich den Editor wie folgt auf eine beliebige Seite druckte:

<?php wp_editor( @$event->description, 'my_editor_id', array(
    'media_buttons' => false,
    'textarea_name' => 'data[description]',
    'quicktags'     => array("buttons"=>"link,img,close"),
) ); ?>
Daithí
quelle
0

Sie können den Inhalt abhängig vom aktuellen Modus des Editors abrufen.

function get_tinymce_content()
    {
    if (jQuery(".switch-tmce").css('background-color')=='rgb(245, 245, 245)')
        return tinyMCE.activeEditor.getContent();
    else
        return jQuery('#html_text_area_id').val();
    }

Die Registerkarte " Visual" enthält eine Klasse, mit switch-tmceder Sie sie als Registerkarte identifizieren können. Sie würden wissen, dass es fokussiert wurde, wenn es die hellere Hintergrundfarbe hat. Sie können damit auch bestimmen, welche der beiden Registerkarten aktiv ist.

Dies ist eine adaptive Lösung, die auf der Antwort von Bainternet basiert . Es gibt wahrscheinlich andere bessere Möglichkeiten, aber diese hat bei mir gut funktioniert.

Abel Melquiades Callejo
quelle
0

Sie können auch addeditorevent verwenden:

  /// Fires when an editor is added to the EditorManager collection.
  tinymce.on('addeditor', function( event ) {
    var editor = event.editor;
    var $textarea = $('#' + editor.id);
    console.log($textarea.val());
  }, true );

TinyMCE 'Additor'-Ereignisdokumentation

Camille Descombes
quelle