Zmień wygląd tekstu shortcode w edytorze


11

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:

wprowadź opis zdjęcia tutaj


To byłoby zdecydowanie wygodne i na pewno jest możliwe w przypadku niektórych wyrażeń regularnych / js. Oto podobne pytanie i wtyczka, która pozwala dodawać podglądy skrótów, chociaż podświetla wszystko tak, jak zasugerowałeś, tak jakbyś to zrobił <code>lub <pre>tagi byłyby z pewnością prostsze.
Bryan Willis

1
Wiem, że nie jest to dla ciebie teraz pomocne, ale
miej


/ OFF temat ode mnie, @brianjohnhanna Widziałem tę wtyczkę, ale jest to rodzaj podglądu (więc jak będzie wyglądać na interfejsie) kodu. Jeśli dobrze rozumiem pytanie, pytanie OP podkreśla shortcode tagi contentwewnątrz tego shortcodew edytorze.
Charles

Odpowiedzi:


12

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.

wprowadź opis zdjęcia tutaj

Ź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

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.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.