wake-up-neo.com

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

Ich bin nicht sicher, warum ich das nicht finden konnte, aber weiß jemand, wie er die Eingabe des TinyMCE-Editors erhält? Ich verwende es im Front-End 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, 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 mich also im HTML-Editor befinde 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 bekommen.

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

ja, ich werde Sicherheitsmaßnahmen implementieren, um sicherzustellen, dass die Datenbank nicht in die Luft gejagt wird.

8
Sam

Anscheinend verfolgt WordPress, welche Art von Editor (visuell oder html) als Klasse aktiv ist, die dem Inhaltswrapper hinzugefügt wird. Hier ist also eine Lösung, mit der Sie den neuesten Inhalt 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();
    }
}
22
Bainternet

Dies ist der Code, den ich unmittelbar vor dem Absenden des Formulars zu meinem Javascript 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();
    }
});
1
Philipp

Sie können auch das Ereignis addeditor 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 'addeditor' Ereignisdokumentation

0

Ich benötigte viel mehr Code, um es zum Laufen zu bringen, und bekam außerdem 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 zuerst clear my browser cache.

Zuerst habe ich einen Rückruf zum wp-Filter tiny_mce_before_init in meiner functions.php-Datei 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 das Folgende verwendete, um den Editor auf einer beliebigen Seite auszudrucken:

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

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

Wobei description die ID des Tinymce-Editors und de-Codes nach else der akzeptierten Antwort ist, hat bei mir nicht funktioniert.

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 hat eine Klasse switch-tmce, mit der 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 also auch bestimmen, welche der beiden Registerkarten aktiv ist.

Dies ist eine adaptive Lösung basierend auf Bainternet 's answer . Es gibt wahrscheinlich andere bessere Möglichkeiten, dies zu tun, aber diese funktionierte gut für mich.