Solution de rendu des codes abrégés dans Admin Editor

19

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'éditeur d'administration, mais lorsque je confie cette tâche à un 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.

    
posée NetConstructor.com 15.12.2011 - 16:43

3 réponses

19

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 dix minutes pour les suivantes.

En définitive, vous allez créer un plugin TinyMCE. Voici ce que vous devriez vous armer pour commencer:

  1. Guide général pour la création d'un plug-in tinymce
  2. Exemple de code provenant de WordPress Core
  3. Un guide général sur l’ajout d’un plugin TinyMCE à WordPress. J'ai trouvé celui-ci , ce qui semble approprié.

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 la CSS trouvée ici .

Edit 2016-04-06: Mise à jour du contenu et des liens pour TinyMCE 4 et WordPress 4.4

    
réponse donnée Matthew Boynes 30.01.2012 - 23:42
0

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

Dans le message de modification de l'administrateur

Extrayez tous les codes courts de la publication sauvegardée et insérez-la dans une métabox, 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

Créer une fonction jQuery, lorsque l’utilisateur clique sur un shortcode, il bascule le code HTML du metabox 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 belle connexion ID. Les mises à jour des codes courts peuvent être effectuées à la volée avec ajax.

Ne jamais enregistrer l'état de shortcode affiché

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 connaître l’API tinyMCE pour comprendre où et quand accéder au contenu de l’éditeur, et vous connecter à des actions javascript avant la sauvegarde et plus encore.

Il peut y avoir plusieurs rédacteurs tinyMCE sur le même post-chargement en édition.

La partie restauration peut être examinée en consultant le [gallery] shortcode beaviour. Mais le clic sur [MY_SHORTCODE] doit être effectué à l'aide de 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.

    
réponse donnée Jonas Lundman 10.06.2018 - 03:00
0

Je recherchais un moyen d’afficher et de modifier graphiquement les codes courts. Et maintenant, finalement, j'ai trouvé un tutoriel qui fait exactement cela: enlace

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

  

Nous allons créer un plugin simple avec un shortcode, alors nous sommes   va ajouter un bouton de l'éditeur TinyMCE pour insérer ce shortcode par un   popup qui va collecter toutes les entrées de l'utilisateur pour le shortcode   les attributs. Ensuite, nous allons remplacer le shortcode dans le TinyMCE   éditeur avec une image de substitution, un peu comme la galerie native de   WordPress (qui est en fait un shortcode, au cas où vous ne le sauriez pas),   et enfin - nous allons permettre l'édition du shortcode et de ses   attributs en double-cliquant sur l’image fictive.

    
réponse donnée Marc Chéhab 23.06.2018 - 22:14

Lire d'autres questions sur les étiquettes