web-dev-qa-db-fra.com

Solution pour rendre les codes courts dans Admin Editor

J'ai posé cette question il y a un an et j'espère qu'il existe une solution simple qui me permettra d'atteindre mon objectif. Alors voilà:

J'utilise souvent des codes abrégés dans l'Editeur d'administration, mais lorsque je remets cela au client, ils ne comprennent souvent pas comment ils fonctionnent.

Ce que je recherche, c’est une solution qui rendrait simplement automatiquement la sortie associée des codes courts dans l’éditeur WYSIWYG de l’administrateur.

D'un point de vue visuel, j'aimerais que cela s'affiche de la même manière que lorsque la ligne "plus" est affichée ou qu'une image est affichée dans l'éditeur. J'entends par là que l'utilisateur verrait la sortie mais ne pourrait que la supprimer mais pas éditer le contenu du shortcode rendu.

functionseditorshortcode
19
NetConstructor.com

Ce n’est pas si grave de faire ce que vous demandez. Cela devrait vous prendre environ une heure pour faire votre première et 10 minutes pour les suivantes.

En fin de compte, vous allez créer un plugin TinyMCE. Voici ce que vous devriez vous armer pour commencer:

  1. Guide général pour créer un plugin tinymce
  2. Exemple de code à partir de WordPress Core
  3. Guide général sur l'ajout d'un plugin TinyMCE à WordPress. J'ai trouvé celui-ci , qui semble adéquat.

Vous avez maintenant tous les outils pour le faire! De tout cela, le code qui vous intéressera le plus est ce bloc dans l'exemple de code WP:

4   function replaceGalleryShortcodes( content ) {
5       return content.replace( /\[gallery([^\]]*)\]/g, function( match ) {
6           return html( 'wp-gallery', match );
7       });
8   }
9
10  function html( cls, data ) {
11      data = window.encodeURIComponent( data );
12      return '<img src="' + tinymce.Env.transparentSrc + '" class="wp-media mceItem ' + cls + '" ' +
13          'data-wp-media="' + data + '" data-mce-resize="false" data-mce-placeholder="1" alt="" />';
14  }

Ici, le shortcode d'une galerie est remplacé par une balise img. La balise img a la classe wp-gallery, qui est stylée par le CSS trouvé ici .

Edit 2016-04-06: Contenu mis à jour et liens pour TinyMCE 4 et WordPress 4.4

19
Matthew Boynes

Ce n'est pas une réponse complète, juste une direction de conception. Je pense que la meilleure approche est quelque chose comme ceci:

Dans le post d'édition d'admin

Extrayez tous les codes abrégés de la publication sauvegardée et insérez-la dans une metabox, en dehors de l'éditeur. Assurez-vous qu'ils apparaissent dans le même ordre que les codes abrégés dans l'éditeur minuscule.

Dans l'API javascript de tinyMCE

Faire une fonction jQuery, lorsque l'utilisateur clique sur un shortcode, il bascule le code HTML de la métabox dans l'éditeur. Et vice versa. La commande elle-même devrait être acceptable en tant qu’association, mais je ne suis pas sûr de vouloir inclure des codes courts. Cependant, il existe de nombreuses façons de concevoir une connexion Nice ID. Les mises à jour des codes courts peuvent être effectuées à la volée avec ajax.

Ne jamais enregistrer l'état de shortcode rendu

Avant de changer d'éditeur, sauvegardez les brouillons, les versions automatiques et la publication, appelez l'API pour déclencher la restauration, afin que l'état de shortcode affiché ne soit jamais sauvegardé ...

Cela peut être fait, mais vous devez être familiarisé avec l'API tinyMCE pour comprendre où et quand accéder au contenu de l'éditeur, et vous connecter à des actions javascript avant de "sauvegarder", etc.

Il peut y avoir plusieurs rédacteurs tinyMCE sur le même post d'édition, pageload.

La partie de restauration peut être étudiée en consultant le [gallery] shortcode beaviour. Mais le clic sur [MY_SHORTCODE] doit être fait par quelques astuces jQuery.

dans le script admin_footer, accédez au contenu de l'endroit où le curseur est actif avec:

var $editor_content = $(tinymce.activeEditor.getBody());

est un indice sur la façon de commencer.

0
Jonas Lundman

Je cherchais un moyen d'afficher graphiquement et Tweak shortcodes aussi. Et maintenant, enfin, j'ai trouvé un tutoriel qui fait exactement cela: https://generatewp.com/take-shortcodes-ultimate-level/

 Screenshot 

J'ajoute la description pour que les moteurs de recherche la récupèrent:

Nous allons créer un plugin simple avec un shortcode, puis nous ajouterons un bouton d'éditeur TinyMCE pour insérer ce shortcode dans une fenêtre contextuelle qui collectera toutes les entrées utilisateur pour les attributs de shortcode. Ensuite, nous allons remplacer le shortcode dans l'éditeur TinyMCE par une image d'espace réservé, un peu comme la galerie native de WordPress (qui est en fait un shortcode, au cas où vous ne le sachiez pas), et enfin - nous allons permettre l'édition du shortcode et de ses attributs en double-cliquant sur l'image de marque de réservation.

0
Marc Chéhab