Changer l'apparence du texte shortcode dans l'éditeur

11

Est-il possible de modifier l'apparence des codes abrégés dans l'éditeur ou de le distinguer davantage du texte environnant?

Par exemple, si le contenu d'un message est comme ceci ...

  

Site de référence sur Lorem Ipsum, fournissant des informations sur ses origines,   ainsi qu'un générateur aléatoire de Lipsum. Site de référence sur Lorem Ipsum,   donnant des informations sur ses origines, ainsi qu'un Lipsum aléatoire   generator. [shortcode] asfdasfd [/ shortcode] Site de référence sur Lorem   Ipsum, donnant des informations sur ses origines, ainsi qu'un Lipsum aléatoire   generator.Reference site sur Lorem Ipsum, donnant des informations sur ses   ainsi qu’un générateur aléatoire de Lipsum. Site de référence sur les   Lorem Ipsum, donnant des informations sur ses origines, ainsi qu’une analyse aléatoire   Générateur de lèvre.

... ce serait bien si le shortcode à l'intérieur est en gras afin qu'il puisse être facilement vu comme ceci:

    
posée Ivan Topić 27.01.2016 - 00:05

1 réponse

12

Vous pouvez ajouter un plugin personnalisé à WordPress ainsi qu’à l’éditeur visuel TinyMCE. La source suivante est un exemple de travail simple qui ajoute une chaîne avant et après tout le shortcode.

Utilisation

Le shortcode trouvera via regex, pertinent si vous en avez besoin pour différents shortcodes et marques différentes à ce sujet. Le script ajoute un contenu personnalisé au shortcode, ici <b>FB-TEST avant et après la balise de fermeture et le contenu. Vous pouvez également utiliser des classes de balisage, css pour créer une visibilité. L'important est que vous supprimiez ce contenu lors de la sauvegarde d'un message, déclenché dans le script sur PostProcess . Exécutez le script et supprimez le contenu personnalisé via la fonction restoreShortcodes .

Mais, est-ce actuellement simple, peut-être pas valable pour chaque exigence. Peut-être devriez-vous stocker le shortcode sur init et restaurer avec cette variable stockée.

Capture d'écran

Voir la capture d'écran à titre d'exemple pour comprendre le résultat.

Source

Lasourceabesoindecettestructurederépertoirepourl'utiliser:

--shortcode-replace|--phpfile|--assets|--js|--jsfile

Audébut,unpetitfichierphp,quiinclutlasourceentantqueplugindansl’environnementwp.Laissez-ledanslerépertoireprincipaldupluginshortcode-replace.

<?php#-*-coding:utf-8-*-/***PluginName:ShortcodeReplace*PluginURI:*Description:*Version:0.0.1*TextDomain:*DomainPath:/languages*License:MIT*LicenseURI:*/namespaceFbShortcodeReplace;if(!function_exists('add_action')){exit();}if(!is_admin()){return;}add_action('admin_enqueue_scripts',__NAMESPACE__.'\initialize');functioninitialize($page){if('post.php'===$page){add_filter('mce_external_plugins',__NAMESPACE__.'\add_tinymce_plugin');}}functionadd_tinymce_plugin($plugins){if(!is_array($plugins)){$plugins=array();}$suffix=defined('SCRIPT_DEBUG')&&SCRIPT_DEBUG?'.dev':'';$url=plugins_url('/assets/js/fb_shortcode_replace.js',__FILE__);$plugins=array_merge($plugins,array('fb_shortcode_replace'=>$url));return$plugins;}

Cefichierphpchargeunjavascriptentantqueplugindansl'éditeurvisuel.Lepluginnesechargeraquesurlespagesd’administrateur,uniquementlespagesaveclachaînepost.php-voirif('post.php'===$page){.

Lasourcesuivanteestlefichierjavascript,nomméfb_shortcode_replace.js.Laissez-ledanslerépertoireassets/js/,danslerépertoireplugindeceplugin.

tinymce.PluginManager.add('fb_shortcode_replace',function(editor){varshortcode=/\[.+\]/g;varadditional_before='<b>FB-TEST';varadditional_after='FB-TEST</b>';functionifShortcode(content){returncontent.search(/\[.+\]/)!==-1;}functionreplaceShortcodes(content){returncontent.replace(shortcode,function(match){returnhtml(match);});}functionrestoreShortcodes(content){content=content.replace(additional_before,'');content=content.replace(additional_after,'');returncontent;}functionhtml(data){console.log(data);returnadditional_before+data+additional_after;}editor.on('BeforeSetContent',function(event){//Noshortcodesincontent,return.if(!ifShortcode(event.content)){return;}event.content=replaceShortcodes(event.content);});editor.on('PostProcess',function(event){if(event.get){event.content=restoreShortcodes(event.content);}});});

Utile

  • Lescommentairessurvosquestions.
  • enlace

Indice supplémentaire

Le plugin Raph permet de convertir des codes courts en HTML pour les visualiser et de les simplifier pour comprendre le résultat. Peut-être que cela est également utile dans ce contexte.

    
réponse donnée bueltge 30.08.2016 - 16:55

Lire d'autres questions sur les étiquettes