Alterar aparência do texto abreviado dentro do editor

É possível alterar a aparência dos códigos de acesso no editor ou de qualquer maneira torná-lo mais distinguível do texto ao redor?

Por exemplo, se o conteúdo de uma postagem for assim ...

Site de referência sobre Lorem Ipsum, fornecendo informações sobre suas origens, bem como um gerador aleatório de Lipsum.Site de referência sobre Lorem Ipsum, fornecendo informações sobre suas origens, bem como um gerador aleatório de Lipsum. [Shortcode] asfdasfd [/ shortcode] Site de referência sobre Lorem Ipsum, fornecendo informações sobre suas origens, bem como um gerador aleatório de Lipsum.O site de referência sobre Lorem Ipsum, fornecendo informações sobre suas origens, bem como um gerador aleatório de Lipsum.Site de referência sobre Lorem Ipsum, fornecendo informações sobre suas origens, bem como um gerador aleatório de Lipsum.

... seria bom se o código de acesso interno estiver em negrito para que possa ser facilmente visto assim:

Você pode adicionar um plug-in personalizado ao WordPress e também ao editor visual TinyMCE. A fonte a seguir é um exemplo que funciona simples e adiciona uma string antes e depois de todo o shortcode.

Uso

O código curto será encontrado via regex, relevante se você precisar para códigos de acesso diferentes e marcas diferentes. O script adiciona conteúdo personalizado ao código de acesso, aqui <b>FB-TESTantes e depois da tag de fechamento e do conteúdo. Você também pode usar as classes marcação e css para criar uma visibilidade. É importante que você remova esse conteúdo em salvar postagem, disparada no script em PostProcess. Aqui executar o script e remover o conteúdo personalizado através da função restoreShortcodes.

Mas, atualmente, isso é simples, talvez não seja válido para cada requisito. Talvez você deva armazenar o código curto no init e restaurar com esta variável armazenada.

Captura de tela

Veja a captura de tela como exemplo para entender o resultado.

Fonte

A fonte precisa desta estrutura de diretórios para usá-lo:

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

Inicialmente, um pequeno arquivo php, que inclui a fonte como plug-in no ambiente wp. Deixe-o no diretório principal do 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;
}

Este arquivo php carrega um javascript como plugin no editor visual. O plugin será carregado apenas nas páginas de administração, somente nas páginas com string post.php- consulte if ( 'post.php' === $page ) {.

A fonte a seguir é o arquivo javascript, nomeado fb_shortcode_replace.js. Deixe-o no diretório assets/js/, dentro do diretório do 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 );
        }
    } );
} );

Útil

• Os comentários sobre suas perguntas.
• https://core.trac.wordpress.org/browser/tags/4.4.2/src/wp-includes/js/tinymce/plugins/wpgallery/plugin.js

Dica adicional

O plugin Raph converte códigos de acesso em html para visualizá-lo e simplifica para entender o resultado. Talvez também seja útil nesse contexto.