wake-up-neo.net

So zeigen Sie TinyMCE ohne wp_editor () an

Ich versuche, den tinyMCE-Editor von WordPress für ein Front-End-Textfeld zu aktivieren, das aus der Pro-Version eines Plugins stammt.

Ich habe das Problem vorübergehend in einerScheinWeise gelöst:

In der kostenlosen Version:

wp_editor(
   $details_val,    //content
   'pre-details',   //editor ID
   array('tinymce'=>false),
);

Dann hat die Pro-Version mit einem Filter-Hook den Wert 'tinymce' auf true gesetzt. Hahaha...

Benötigen Sie eine tragfähige Lösung

Hier ist mein Textbereich am Frontend:

<textarea class="tinymce-enabled" rows="5" cols="40" name="pre_details" id="pre-details"><?php echo $details_val; ?></textarea>

Ich habe folgende Funktion in jQuery ausprobiert:

jQuery(document).ready(function($) {
    tinymce.init({
        selector :"pre-details",
        mode : "specific_textareas",
        theme : "simple",
        editor_selector :"tinymce-enabled"
    });
});

Und die Dateien werden folgendermaßen aufgerufen:

function pre_scripts() {
    if( is_page('xyz') ) {
        wp_enqueue_script( 'pre-scripts', Pre()->plugin_url() .'/assets/js/pre-scripts.min.js', array('jquery', 'tiny_mce'), Pre()->version, true );
    }
}
add_action( 'wp_enqueue_scripts', 'pre_scripts' );

Erstens, wenn ich die 'tiny_mce'-Abhängigkeit nicht verwende, zeigt die tinymce.init() einen Fehler, dass diese Funktion nicht gefunden wurde, aber mein benutzerdefiniertes Skript wird geladen. Wenn ich jedoch die 'tiny_mce'-Abhängigkeit hinzufüge, wird mein benutzerdefiniertes Skript nicht einmal geladen. Aber der Hook ist in dev resources erwähnt .

Ich habe diesen WPSE-Thread gefunden, was darauf hindeutet, dass es sich um ein uraltes Problem handelt. Aber die dort dargestellte Problemumgehung löst mein Problem nicht.

Ich habe auch verschiedene Versionen ausprobiert:

$(function() {
   $('textarea.tinymce-enabled').tinymce({
        mode : "specific_textareas",
        theme : "simple", 
   });
});

und

tinyMCE.execCommand('mceAddControl', false, 'pre-details');

Aber kein glück Da diese Abhängigkeit mein Skript in die Warteschlange stellt,
oder die alternativen Methoden zum Laden der Tinymce-Kernskripte stimmen nicht mit meinen Skripten überein.

Wie kann ich den tinyMCE-Rich-Text-Editor von WordPress in ein Textfeld im Frontend laden, ohne wp_editor() zu verwenden, aber auf steckbare Weise?

front-endvisual-editorwp-editor
6
Mayeenul Islam

Wenn Sie wp_editor im Front-End nicht benötigen, denke ich, dass es in Ordnung ist. Hier ein bisschen andere Optionseinstellungen mit Deinem tinymce init. Ich benutze dies ohne wp_editor im Frontend.

<script>
jQuery( document ).ready( function( $ ) {
    tinymce.init( {
        mode : "exact",
        elements : 'pre-details',
        theme: "modern",
        skin: "lightgray",
        menubar : false,
        statusbar : false,
        toolbar: [
            "bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | undo redo"
        ],
        plugins : "paste",
        paste_auto_cleanup_on_paste : true,
        paste_postprocess : function( pl, o ) {
            o.node.innerHTML = o.node.innerHTML.replace( /&nbsp;+/ig, " " );
        }
    } );
} );
</script>

inhalt bekommen

tinymce.get('pre-details').getContent()

In WP function wp_enqueue_scripts

wp_enqueue_script( 'tinymce_js', includes_url( 'js/tinymce/' ) . 'wp-tinymce.php', array( 'jquery' ), false, true );

Sie können editor.min.css für Ihren Stil einreihen.

9
Jevuska