Change appearance of shortcode text inside editor

Question

Is it possible to change appearance of shortcodes in editor or in whatever way make it more distinguishable from surrounding text?

For example if the content of a post is like this...

Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.[shortcode]asfdasfd[/shortcode]Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.

... it would be nice if the shortcode inside is bold so it can easily be seen like this:

Answer 1

You can add a custom plugin, to WordPress and also the TinyMCE visual editor. The follow source is a example that simple works and add a string before and after all shortcode.

Usage

The shortcode will find via regex, relevant if you need it for different shortcodes and different mark on this. The script add custom content to the shortcode, here <b>FB-TEST before and after the closing tag and the content. You can also use markup, css classes to create a visibility. Important is it, that you remove this content on save post, fired in the script on PostProcess. Here run the script and remove the custom content via the function restoreShortcodes.

But, currently is this simple, maybe not valid for each requirement. Maybe you should store the shortcode on init and restore with this stored variable.

Screenshot

See the screenshot as example to understand the result.

Source

The source need this directory structure to use it:

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

At first a small php file, that include the source as plugin in the wp environment. Leave it in the main directory of the 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;
}

This php file load a javascript as plugin in the visual editor. The plugin will load only on admin pages, only pages with string post.php - see if ( 'post.php' === $page ) {.

The follow source is the javascript file, named fb_shortcode_replace.js. Leave it in the directory assets/js/, inside the plugin directory of this 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 );
        }
    } );
} );

Helpful

• The comments on your questions.
• https://core.trac.wordpress.org/browser/tags/4.4.2/src/wp-includes/js/tinymce/plugins/wpgallery/plugin.js

Additional hint

The plugin Raph convert shortcodes in html to view it and simplify to understand the result. Maybe it is also helpful in this context.