Изменить внешний вид текста шорткода в редакторе

Можно ли изменить внешний вид шорткодов в редакторе или сделать его более отличимым от окружающего текста?

Например, если содержание сообщения таково ...

Ссылочный сайт о Lorem Ipsum, предоставляющий информацию о его происхождении, а также случайный генератор Lipsum. Ссылочный сайт о Lorem Ipsum, предоставляющий информацию о его происхождении, а также случайный генератор Lipsum. [Shortcode] asfdasfd [/ shortcode] Ссылочный сайт о Lorem Ipsum, давая информацию о его происхождении, а также случайный генератор Lipsum. Ссылка на сайт о Lorem Ipsum, давая информацию о его происхождении, а также случайный генератор Lipsum. Ссылка на сайт о Lorem Ipsum, давая информацию о его происхождении, а также случайный генератор Lipsum.

... было бы неплохо, если бы шорткод внутри был полужирным, чтобы его можно было легко увидеть так:

Вы можете добавить собственный плагин для WordPress, а также визуальный редактор TinyMCE. Следующий источник - пример, который просто работает и добавляет строку до и после всего шорткода.

использование

Шорткод будет найден через регулярное выражение, если он вам нужен для разных шорткодов и разной пометки. Сценарий добавляет пользовательский контент в шорткод, здесь <b>FB-TESTдо и после закрывающего тега и контента. Вы также можете использовать разметку, классы CSS для создания видимости. Важно то, что вы удаляете этот контент при сохранении поста, запущенного в скрипте PostProcess. Здесь запустите скрипт и удалите пользовательский контент через функцию restoreShortcodes.

Но в настоящее время это просто, может быть, не подходит для каждого требования. Возможно, вам следует сохранить шорткод в init и восстановить с помощью этой сохраненной переменной.

Снимок экрана

Смотрите на скриншот в качестве примера, чтобы понять результат.

Источник

Источнику нужна эта структура каталогов, чтобы использовать ее:

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

Сначала небольшой php-файл, содержащий исходный код в качестве плагина в среде wp. Оставьте его в главном каталоге плагина 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;
}

Этот PHP-файл загружает JavaScript в качестве плагина в визуальном редакторе. Плагин будет загружаться только на страницах администратора, только страницы со строкой post.php- смотрите if ( 'post.php' === $page ) {.

Следующим источником является файл javascript с именем fb_shortcode_replace.js. Оставьте его в каталоге assets/js/, внутри каталога плагинов этого плагина.

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 );
        }
    } );
} );

полезный

• Комментарии на ваши вопросы.
• https://core.trac.wordpress.org/browser/tags/4.4.2/src/wp-includes/js/tinymce/plugins/wpgallery/plugin.js

Дополнительная подсказка

Плагин Raph конвертирует шорткоды в html для просмотра и упрощения, чтобы понять результат. Может быть, это также полезно в этом контексте.