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

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.

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();
    }
}

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();
    }
});

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.

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"),
) ); ?>

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.

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