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

Est-il possible de changer l'apparence des shortcodes dans l'éditeur ou de quelque manière que ce soit de les distinguer du texte environnant?

Par exemple, si le contenu d'un article est comme ça ...

Site de référence sur Lorem Ipsum, donnant des informations sur ses origines, ainsi qu'un générateur de Lipsum aléatoire.Site de référence sur Lorem Ipsum, donnant des informations sur ses origines, ainsi qu'un générateur de Lipsum aléatoire. [Shortcode] asfdasfd [/ shortcode] Site de référence sur Lorem Ipsum, donnant des informations sur ses origines, ainsi qu'un générateur de Lipsum aléatoire.Site de référence sur Lorem Ipsum, donnant des informations sur ses origines, ainsi qu'un générateur de Lipsum aléatoire.Site de référence sur Lorem Ipsum, donnant des informations sur ses origines, ainsi qu'un générateur de Lipsum aléatoire.

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

Vous pouvez ajouter un plugin personnalisé, à WordPress et également à l'éditeur visuel TinyMCE. La source suivante est un exemple qui fonctionne simplement et ajoute une chaîne avant et après tout shortcode.

Usage

Le shortcode trouvera via regex, pertinent si vous en avez besoin pour différents shortcodes et marque différente à ce sujet. Le script ajoute du contenu personnalisé au shortcode, ici <b>FB-TESTavant et après la balise de fermeture et le contenu. Vous pouvez également utiliser le balisage, les classes css pour créer une visibilité. Il est important que vous supprimiez ce contenu lors de l'enregistrement de la publication, tiré dans le script PostProcess. Ici, exécutez le script et supprimez le contenu personnalisé via la fonction restoreShortcodes.

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

Capture d'écran

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

La source

La source a besoin de cette structure de répertoires pour l'utiliser:

-- shortcode-replace
 |--php file
 |--assets
   |-- js
     |-- js file

Au début, un petit fichier php, qui inclut la source comme plugin dans l'environnement wp. Laissez-le dans le répertoire principal du plugin shortcode-replace.

<?php # -*- coding: utf-8 -*-

/**
 * Plugin Name:     Shortcode Replace
 * Plugin URI:      
 * Description:     
 * Version:         0.0.1
 * Text Domain:     
 * Domain Path:     /languages
 * License:         MIT
 * License URI:
 */

namespace FbShortcodeReplace;

if ( ! function_exists( 'add_action' ) ) {
    exit();
}

if ( ! is_admin() ) {
    return;
}

add_action( 'admin_enqueue_scripts', __NAMESPACE__ . '\initialize' );
function initialize( $page ) {

    if ( 'post.php' === $page ) {
        add_filter( 'mce_external_plugins', __NAMESPACE__ . '\add_tinymce_plugin' );
    }
}

function add_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;
}

Ce fichier php charge un javascript en tant que plugin dans l'éditeur visuel. Le plugin ne se chargera que sur les pages d'administration, uniquement les pages avec chaîne post.php- voir if ( 'post.php' === $page ) {.

La source suivante est le fichier javascript, nommé fb_shortcode_replace.js. Laissez-le dans le répertoire assets/js/, à l'intérieur du répertoire du plugin de ce plugin.

tinymce.PluginManager.add( 'fb_shortcode_replace', function( editor ) {

    var shortcode = /\[.+\]/g;
    var additional_before = '<b>FB-TEST';
    var additional_after = 'FB-TEST</b>';

    function ifShortcode( content ) {

        return content.search( /\[.+\]/ ) !== -1;
    }

    function replaceShortcodes( content ) {

        return content.replace( shortcode, function( match ) {
            return html( match );
        } );
    }

    function restoreShortcodes( content ) {

        content = content.replace( additional_before, '' );
        content = content.replace( additional_after, '' );
        return content;
    }

    function html( data ) {

        console.log( data );
        return additional_before + data + additional_after;
    }

    editor.on( 'BeforeSetContent', function( event ) {

        // No shortcodes in content, 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

• Les commentaires sur vos questions.
• https://core.trac.wordpress.org/browser/tags/4.4.2/src/wp-includes/js/tinymce/plugins/wpgallery/plugin.js

Astuce supplémentaire

Le plugin Raph convertit les shortcodes en html pour le visualiser et simplifier pour comprendre le résultat. Peut-être que cela est également utile dans ce contexte.