Змініть зовнішній вигляд тексту короткого коду всередині редактора

Чи можна змінити зовнішній вигляд коротких кодів у редакторі чи яким-небудь чином зробити його більш відрізним від навколишнього тексту?

Наприклад, якщо вміст публікації такий:

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

... Було б добре, якщо короткий код всередині є жирним, щоб його можна було легко побачити так:

Ви можете додати спеціальний плагін до 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, щоб переглянути його та спростити, щоб зрозуміти результат. Можливо, це також корисно в цьому контексті.