11

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:

enter image description here

7
  • That would definitely be convenient and surely is possible with some regex/js . Here is a similar question and a plugin that lets you add previews for the shortcodes although simply highlighting all as you suggested, like you would <code> or <pre> tags would definitely be simpiler. Jan 27 '16 at 3:46
  • 1
    I know this isn't helpful to you right now but keep an eye on Shortcake for integration into core soon... will make this long needed core feature a reality Feb 2 '16 at 20:53
  • 3
    Possible duplicate of Solution to render Shortcodes in Admin Editor Feb 14 '16 at 1:38
  • /OFF topic from me, @brianjohnhanna I have seen that plugin but that is a kind of preview (so how it will look on frontend) of the code. If I understand the question well the question of the OP is highlighting the shortcode tag and content inside that shortcode in the editor.
    – Charles
    Feb 14 '16 at 4:35
  • 1
    wordpress.org/plugins/shortcode-ui
    – jgraup
    Aug 30 '16 at 14:11
12
+50

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.

enter image description here

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

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.