web-dev-qa-db-fra.com

Comment afficher TinyMCE sans wp_editor ()

J'essaie d'activer l'éditeur tinyMCE de WordPress pour une zone de texte frontale, à partir de la version professionnelle d'un plugin.

J'ai temporairement résolu le problème dans unfauxmanière:

En version gratuite:

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

Ensuite, à partir de la version professionnelle, avec un crochet de filtre, définissez la valeur 'tinymce' sur true. Hahaha...

Besoin d'une solution viable

Voici ma zone de texte sur le front-end:

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

J'ai essayé la fonction suivante dans jQuery:

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

Et les fichiers sont appelés de la manière suivante:

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

Tout d'abord, si je n'utilise pas la dépendance 'tiny_mce', la tinymce.init() affiche une erreur indiquant que cette fonction n'a pas été trouvée, mais mon script personnalisé se charge. Mais si j'ajoute la dépendance 'tiny_mce', mon script personnalisé ne se charge même pas. Mais le crochet est mentionné dans les ressources de développement .

J'ai trouvé ce fil WPSE , qui suggère que c'est un problème séculaire. Mais la solution de contournement représentée ici ne résout pas mon problème.

J'ai aussi essayé différentes versions:

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

et

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

Mais pas de chance. Parce que cette dépendance met mon script en file d'attente,
ou, les méthodes alternatives de chargement des scripts de base tinymce ne sont pas conformes à mes scripts.

Comment puis-je charger l'éditeur tinyMCE Rich Text de WordPress dans une zone de texte en front-end sans utiliser wp_editor(), mais de manière pluggable?

front-endvisual-editorwp-editor
6
Mayeenul Islam

Si vous n'avez pas besoin de wp_editor en front-end, je pense que c'est OK. Voici un peu différentes options avec votre init tinymce. J'utilise ceci sans wp_editor en front-end.

<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>

pour obtenir du contenu

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

Dans WP function wp_enqueue_scripts

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

Vous pouvez mettre en file d'attente editor.min.css pour votre style.

9
Jevuska