Zmień wygląd tekstu shortcode w edytorze

Czy można zmienić wygląd skrótów w edytorze lub w jakikolwiek inny sposób odróżnić go od otaczającego tekstu?

Na przykład, jeśli treść postu jest taka ...

Strona referencyjna o Lorem Ipsum, podająca informacje o jego pochodzeniu, a także losowy generator Lipsum. Strona referencyjna o Lorem Ipsum, podająca informacje o jego pochodzeniu, a także losowy generator Lipsum. [Shortcode] asfdasfd [/ shortcode] o Lorem Ipsum, podając informacje o jego pochodzeniu, a także losowy generator Lipsum. Strona referencyjna o Lorem Ipsum, podająca informacje o jego pochodzeniu, a także losowy generator Lipsum. Strona referencyjna o Lorem Ipsum, podająca informacje o jego pochodzeniu, a także losowy generator Lipsum.

... byłoby miło, gdyby skrót wewnątrz był pogrubiony, dzięki czemu można go łatwo zobaczyć w następujący sposób:

Możesz dodać niestandardową wtyczkę do WordPress, a także edytora wizualnego TinyMCE. Poniższe źródło jest przykładem, że proste działa i dodaje ciąg przed i po krótkim kodzie.

Stosowanie

Krótki kod znajdzie się poprzez regex, odpowiedni, jeśli potrzebujesz go dla różnych skrótów i różnych znaków na tym. Skrypt dodaje niestandardową treść do krótkiego kodu, tutaj <b>FB-TESTprzed i po tagu zamykającym i treści. Możesz także użyć znaczników, klas css, aby utworzyć widoczność. Ważne jest to, że usuwasz tę treść podczas zapisywania postu, uruchomionego w skrypcie na PostProcess. Tutaj uruchom skrypt i usuń niestandardową zawartość za pomocą funkcji restoreShortcodes.

Ale obecnie jest to proste, może nie ważne dla każdego wymagania. Być może powinieneś zapisać krótki kod przy init i przywrócić z tą przechowywaną zmienną.

Zrzut ekranu

Zobacz zrzut ekranu jako przykład, aby zrozumieć wynik.

Źródło

Źródło potrzebuje tej struktury katalogów, aby z niego skorzystać:

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

Najpierw mały plik php, który zawiera źródło jako wtyczkę w środowisku wp. Pozostaw go w głównym katalogu wtyczki 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;
}

Ten plik php ładuje javascript jako wtyczkę w edytorze wizualnym. Wtyczka ładuje się tylko na stronach administracyjnych, tylko na stronach z ciągiem post.php- patrz if ( 'post.php' === $page ) {.

Następujące źródło to plik javascript o nazwie fb_shortcode_replace.js. Pozostaw go w katalogu assets/js/, w katalogu wtyczek tej wtyczki.

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

Pomocny

• Komentarze do twoich pytań.
• https://core.trac.wordpress.org/browser/tags/4.4.2/src/wp-includes/js/tinymce/plugins/wpgallery/plugin.js

Dodatkowa wskazówka

Wtyczka Raph konwertuje skróty w HTML, aby je wyświetlić i uprościć zrozumienie wyniku. Być może jest to również pomocne w tym kontekście.