web-dev-qa-db-fra.com

Comment créer WP Éditeur utilisant javascript

J'essaie de créer une sorte de champs répétés et pour cela, je veux créer un nouvel éditeur wp avec un identifiant unique.

Donc, ma question est-il possible de créer wp_editor en utilisant un js? Même chose que nous obtenons avec la fonction WordPress <?php wp_editor() ?>.

J'ai essayé d'utiliser

tinyMCE .init( { mode : "exact" , elements : "accordion_icon_description_"+response.success.item_count });

mais il imprime très basique éditeur qui est je pense pas même chose que de WordPress post éditeur de champ de contenu

postsjavascripteditorpost-content
2
1naveengiri

Merci à le commentaire de Jacob Peattie Je peux répondre à cette question en utilisant uniquement JS. En fait, nous avons fait quelque chose de similaire, mais avant la version 4.8 et ce n'était pas si facile, nous avons donc utilisé wp_editor() à la fin. Mais maintenant, vous pouvez le faire en utilisant un objet wp.editor en JavaScript . Il y a 3 fonctions principales

  1. wp.editor.initialize = function( id, settings ) {

Où id est

L'identifiant HTML de la zone de texte utilisée pour l'éditeur. Doit être conforme à jQuery. Pas de crochets, caractères spéciaux, etc.

et settings est un objet

{
    tinymce: {
        // tinymce settings
    },
    quicktags: {
        buttons: '..'
    }
}

avec ces paramètres TinyMCE . Au lieu de n’importe lequel des 3 objets (settings, tinymce ou quicktags), vous pouvez utiliser true pour utiliser les valeurs par défaut.

  1. wp.editor.remove = function( id ) {

Est assez explicite. Supprimez toute instance d'éditeur créée via wp.editor.initialize.

  1. wp.editor.getContent = function( id ) {

Bien, récupérez le contenu de n’importe quel éditeur créé via wp.editor.initialize.

L'utilisation pourrait ressembler à

var countEditors = 0;
$(document).on('click', 'button#addEditor', function() {
    var editorId = 'editor-' + countEditors;
    // add editor in HTML as <textarea> with id editorId
    // give it class wp-editor
    wp.editor.initialize(editorId, true);
    countEditors++;
});
$(document).on('click', 'button.removeEditor', function() {
   // assuming editor is under the same parent
   var editorId = $(this).parent().find('.wp-editor');
   wp.editor.remove(editorId);
});

Comme le contenu sera automatiquement publié, il n'est pas nécessaire dans cet exemple. Mais vous pouvez toujours le récupérer via wp.editor.getContent( editorId )

5
kero

Vous devez d’abord utiliser wp_enqueue_editor(); pour générer les scripts d’éditeur, les feuilles de style et les paramètres par défaut. Vous pouvez trouver ceci documenté ici wp_enqueue_editor ()

Vous devez supprimer la fonction true de la manière suivante: wp.editor.initialize(editorId);

1
Antonio Novak