Inhalte von WP Tinymce abrufen

Lesezeit: 4 Minuten

Benutzeravatar von Eray
Eray

Ich versuche, ein WordPress-Plugin zu schreiben. Ich werde gezählte Wörter erhalten, die im Tinymce-Editor von WP enthalten sind. Im Grunde ist es ein Wortzähler, der Ihre Beiträge lange zählt und Ihnen diese Nachricht in einer Metabox gibt

Dein Beitrag hat 450 Wörter

Mein einziges Problem ist, Worte von Tinymce über Javascript zu bekommen. Das funktioniert nicht:

document.getElementById('content')

Die Inhalts-ID von Tinymce lautet Inhalt . Aber dieser Code gibt NULL zurück. Ich konnte keinen gültigen ID-Namen für Tinymce finden.

In Kürze sind alle anderen Codes fertig, nur bekomme ich keine Worte aus dem WYSIWYG-Editor von WordPress.

Vielen Dank.

Benutzeravatar von Mauvis Ledford
Mauvis Ledford

Versuchen:

tinymce.activeEditor.getContent();

oder

tinymce.editors.content.getContent();

Wobei “Inhalt” die ID Ihres Textbereichs ist.

Wenn Sie nur den ausgewählten (hervorgehobenen) Text im TinyMCE-Textbereich erhalten möchten, würden Sie Folgendes tun:

tinymce.activeEditor.selection.getContent();

Die vollständige API ist hier: http://tinymce.moxiecode.com/wiki.php/API3:class.tinymce.Editor

TinyMCE bietet auch viele Veranstaltungen an, an die Sie sich binden können, insbesondere in Ihrem Fall die Taste auf, Taste nach untenund Taste gedrückt Veranstaltungen.

Stellen Sie sicher, dass Sie dieses Zeug erst aufrufen, nachdem TinyMCE auf der Seite geladen wurde.

  • Hat perfekt funktioniert! Ich kann nicht glauben, dass es so einfach war.

    – Adam Grant

    21. Januar 2012 um 4:09 Uhr

  • Wie Savitas in seiner Antwort unten erwähnte, funktionieren diese Lösungen nicht für alle benutzerdefinierten Editoren – insbesondere wenn Sie Bindestriche in der ID haben. Obwohl es sich nicht um ein winziges Problem handelt, sondern nur um die Funktionsweise von Javascript, kann es Ihnen einige Probleme bereiten. Die Antwort von Savitas lautet, stattdessen “editors” als Array zu verwenden: tinymce.editors['content_id'].getContent();

    – Radley Sustaire

    6. September 2013 um 18:50 Uhr


  • Mir ist aufgefallen, dass WordPress manchmal einen bestimmten Tinymce-Editor noch nicht registriert hat. Außerdem hat WordPress js-Funktionen removep() und autop(), die verschiedene Entitäten entfernen und hinzufügen, wie

    , das tinymce.getContent() gerne hinzufügt. Versuchen Sie es stattdessen mit wp.editor.getContent('content'). Es gibt nicht viel Dokumentation darüber, aber ich habe festgestellt, dass es genau das zurückgibt, was in der Datenbank gespeichert wird.

    – Meilenvp

    13. Dezember 2018 um 20:38 Uhr


Ich erinnere mich, dass winzige MCE Inhalte dynamisch von Ajax lädt, also vielleicht Ihre document.getElementById('content') Versuchen Sie, dieses Element zu früh zu bekommen.

Ich denke, Sie haben 2 Möglichkeiten, dieses Problem zu lösen:

1) Warten Sie mit einem Ereignis-Listener auf den Abschluss des Ajax-Ereignisses und holen Sie sich danach das Element und seinen Text.

2) Verwenden Sie die Funktion tinyMce, um den Inhalt eines Textbereichs abzurufen. Hier finden Sie einige nützliche Tipps:
http://tinymce.moxiecode.com/wiki.php/How-to_load/save_with_Ajax_in_TinyMCE

  • Danke Manuel, jetzt probiere ich es aus 🙂

    – Eray

    30. April 2011 um 16:24 Uhr

Die akzeptierte Antwort hat für mich funktioniert, aber für mehrere Editoren auf einer Seite muss ich über die Editor-ID darauf zugreifen, also unten

tinymce.editors['content_id'].getContent();

Hat für mich funktioniert.

Benutzeravatar von NaMarPi
NaMarPi

Hier ist ein Beispiel. Der Text unterhalb des Editors wird aktualisiert, unabhängig davon, ob das Keyup im visuellen oder im HTML-Modus erfolgt ist.

WP tinyMCE onKeyUp

Visueller Modus Ereignis in der PHP-Datei:

function my_tiny_mce_before_init( $init ) {
    $init['setup'] = "function( ed ) { ed.onKeyUp.add( function( ed, e ) { repeater( e ); }); }";
    return $init;
}
add_filter( 'tiny_mce_before_init', 'my_tiny_mce_before_init' );

HTML-Modus Ereignis in der Javascript-Datei:

jQuery( document ).ready( function( $ ) {

    $('<div id=look-at-it></div>').insertAfter('#postbox-container-1');

    $('#content').on('keyup', function( e ) {   
        repeater( e );
    });
});


var repeater = function ( e ) {
    var targetId = e.target.id;
    var text="";

    switch ( targetId ) {

         case 'content':
             text = jQuery('#content').val(); 
             break;

         case 'tinymce':
             if ( tinymce.activeEditor )
                 text = tinymce.activeEditor.getContent();
             break;
    }

    jQuery('#look-at-it').html( text );
}


Getestet am:

  • WordPress 3.4.2

Das hat bei mir funktioniert:

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

Wo Text ist die ID des tinymce-Editors

  • Das Übergeben des Parameters format:html bedeutete, dass ich das eigentliche HTML erhalten habe – und nicht das Escapezeichen <p>

    – zak

    18. Januar 2018 um 7:08 Uhr


Benutzeravatar von Nikolay
Nikolai

Dies scheint für mich in jeder Situation zu funktionieren, die ich getestet habe. Unabhängig davon, ob wir im Textmodus oder im visuellen Modus beginnen und unabhängig davon, ob wir die Modi ändern und danach weitere Inhalte hinzufügen.

if ( tinyMCE.editors['id-of-your-editor'] ) {
    tinyMCE.editors['id-of-your-editor'].save();
    tinyMCE.editors['id-of-your-editor'].load();
    var your_content = tinyMCE.editors['id-of-your-editor'].getContent();
} else if ( document.getElementById( 'id-of-your-editor' ) ) {
    var your_content = document.getElementById( 'id-of-your-editor' ).value;
} else {
    alert ( 'Error' );
}

  • Das Übergeben des Parameters format:html bedeutete, dass ich das eigentliche HTML erhalten habe – und nicht das Escapezeichen <p>

    – zak

    18. Januar 2018 um 7:08 Uhr


1404480cookie-checkInhalte von WP Tinymce abrufen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy