web-dev-qa-db-fra.com

Comment prévisualiser le résultat d'un shortcode dans l'éditeur TinyMCE?

J'ai créé un shortcode via l'API Shortcode qui fait quelque chose comme ceci:

[accordion_item numero="01" primeiro="true"]Item 01[/accordion_item]
[accordion_conteudo]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed quis nisi eget eros ultrices vestibulum in sit amet nunc.
Cras varius pellentesque tellus nec vulputate. Nam viverra congue diam ut vehicula.
[/accordion_conteudo]

devient:

<div class="DV_item BordaTop ">
                        <ul>
                            <li class="LI_numero neoSans">01</li>
                            <li class="LI_Pergunta">
                                <h2>Item 01</h2>
                            </li>
                        </ul>
                    </div><br />
<div class="DV_Conteudo"><p><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
Sed quis nisi eget eros ultrices vestibulum in sit amet nunc.<br />
Cras varius pellentesque tellus nec vulputate. Nam viverra congue diam ut vehicula.<br />
</p></div>

J'aimerais que l'utilisateur puisse prévisualiser ce résultat dans l'éditeur, comme le font d'autres codes courts, comme [galerie].

Des idées?

shortcodetinymce
2
Beto Frega

Je viens de passer 24 heures à essayer la même mise en œuvre, mais avec un aperçu plus élaboré des résultats. Fondamentalement, comme un constructeur de disposition utilisant des codes courts.

J'aurais aimé trouver cet article plus tôt, car il jette les bases du premier objectif (utilisation de TinyMCE pour la sélection d'attributs de code abrégé par un simple clic et clic):

La deuxième partie de votre question que vous devrez accomplir vous-même, comme je l’ai trouvé plus tôt, est la suivante: zero help sous forme de tutoriels/conseils et pour de bonnes raisons; trouvé de nombreux thèmes premium en utilisant cela comme point de vente. Vous pouvez supprimer la fonctionnalité de prévisualisation d'un plugin woothemes appelé " shortcode-ninja ", mais il tentera de vous forcer à utiliser un thème woo.

Je ne parle pas couramment tinymce, thickbox ou toute obfuscation de code réel (ce que je suppose que le plugin tente de faire.) Bien que cela puisse être un jeu d'enfant pour tout codeur réel.

plugin tinymce shortcodes
plugin previews shortcode

Ok, je vais essayer d'améliorer ma réponse selon la suggestion de s_ha_dum.

J'ai déjà passé pas mal de temps à bricoler, donc cette réponse est une approche fusil à pompe. N'hésitez pas à le modifier s'il n'est pas conforme aux directives de format, etc.

Pour empêcher le plugin de rechercher un wootheme, vous devez rechercher des entrées telles que:

$woo_framework_version = get_option('woo_framework_version');

$MIN_VERSION = '2.9';

$meetsMinVersion = version_compare($woo_framework_version, $MIN_VERSION) >= 0;

$woo_shortcode_css = dirname(__FILE__) .  '/../../../themes/' 
                                   . basename(get_template_directory())
                                   . '/functions/css/shortcodes.css';
                                   $isWooTheme = file_exists($woo_shortcode_css);

<?php if ( $meetsMinVersion && $isWooTheme ) { ?>

<?php  }  else { ?>

<div id="scn-options-error">

<?php } else { ?>

On dirait que votre thème actif ne provient pas de WooThemes. Shortcode Ninja uniquement marche avec  se bat pour thèmes de WooThemes.

Que faire maintenant?

Choisissez un combat: (1) Si vous avez déjà un thème de WooThemes, installez-le et activez-le ou (2) si vous ne possédez pas encore l'un des géniaux WooThemes, dirigez-vous vers le lien "maintenant créé".

Quoi qu’il en soit, le simple fait de contourner le thème n’a pas fait grand chose dont je me souvienne. Vous devrez réécrire le code ou faire de l'ingénierie inverse? le code. Il me semblait que cela passait par beaucoup de variables aléatoires, mais honnêtement, c'est peut-être ainsi que TinyMCE fonctionne. Je ne suis pas trop certain à cet égard.

Une autre chose que je devrais mentionner est que, tout en recherchant une réponse comme celle-ci, j’ai découvert que l’exploit entier du Wootheme n’était pas si longtemps dû au code de ce plugin. Ce qui explique peut-être pourquoi il n'y a plus de prévisualisation lors de l'utilisation de leur générateur de shortcode comme auparavant. Assurez-vous donc que le code est réellement sûr avant de le mettre en production. La prévisualisation en shortcode est un petit luxe, mais pas si elle comporte des failles de sécurité.

WooThemes WooFramework exploit: Exécuter n'importe quel shortcode en tant que visiteur non authentifié: Gist.github.com/jasongill/2523147

La cause en est le code suivant dans functions/js/shortcode-generator/preview-shortcode-external.php

$shortcode = isset($_REQUEST['shortcode']) ? $_REQUEST['shortcode'] : '';

$shortcode = strip_tags( stripslashes($shortcode) );

echo do_shortcode($shortcode);

La meilleure réponse que je puisse vous donner, mis à part le plugin mis à jour proprement dit, est de rechercher la modification de kreisi, qu'il inclut dans ses thèmes WordPress premium. J'ai aussi trouvé quelqu'un qui vendait des fonctionnalités de plugin similaires sur codecanyon. "shortcodes de vision" ou similaire.

Googler cela vous servirait probablement bien:
"VisualShortcodes.com (modifié par Kriesi)"

Essayez d’acheter un thème si vous trouvez ses modifications utiles.

Edit 2: Nous avons trouvé une implémentation vraiment géniale/unique de thickbox avec un style superbe, et une sélection de shortcode d'icônes fontawesome. Seul l'aperçu est constitué des icônes, mais je pensais que cela méritait d'être inclus:

http://themenectar.com/demo/salient/features/elements/ (disponible à l'achat sur Themeforest)

3
nocommit

Remplacement des codes courts dans TinyMCE par un graphique:

Remplacement des codes courts insérés dans TinyMCE par un graphique- WPSites.co.uk

0
user42579