Cambia l'aspetto del testo dello shortcode all'interno dell'editor


11

È possibile modificare l'aspetto dei codici brevi nell'editor o in qualsiasi modo renderlo più distinguibile dal testo circostante?

Ad esempio se il contenuto di un post è così ...

Sito di riferimento su Lorem Ipsum, che fornisce informazioni sulle sue origini, nonché un generatore di Lipsum casuale. Sito di riferimento su Lorem Ipsum, che fornisce informazioni sulle sue origini, nonché un generatore di Lipsum casuale. [Codice breve] asfdasfd [/ shortcode] Sito di riferimento su Lorem Ipsum, fornendo informazioni sulle sue origini, nonché un generatore di Lipsum casuale. Sito di riferimento su Lorem Ipsum, fornendo informazioni sulle sue origini, nonché un generatore di Lipsum casuale. Sito di riferimento su Lorem Ipsum, fornendo informazioni sulle sue origini, così come un generatore di Lipsum casuale.

... sarebbe bello se lo shortcode all'interno fosse in grassetto, quindi può essere facilmente visto in questo modo:

inserisci qui la descrizione dell'immagine


Sarebbe sicuramente conveniente e sicuramente è possibile con alcuni regex / js. Ecco una domanda simile e un plug-in che ti consente di aggiungere anteprime per i codici brevi anche se semplicemente evidenziando tutto come hai suggerito, come faresti <code>o i <pre>tag sarebbero sicuramente simpiler.
Bryan Willis,

1
So che non ti è utile in questo momento, ma tieni d'occhio Shortcake per l'integrazione nel core presto ... renderà realtà questa funzionalità di base tanto necessaria
brianjohnhanna,


/ OFF argomento da parte mia, @brianjohnhanna Ho visto quel plugin ma è una specie di anteprima (quindi come apparirà sul frontend) del codice. Se capisco bene la domanda, la domanda dell'OP sta mettendo in evidenza la shortcode tage contentall'interno di quella shortcodenell'editor.
Charles,

Risposte:


12

Puoi aggiungere un plug-in personalizzato a WordPress e anche all'editor visivo di TinyMCE. La seguente fonte è un esempio del fatto che semplice funziona e aggiunge una stringa prima e dopo tutto lo shortcode.

uso

Lo shortcode lo troverà tramite regex, rilevante se ne hai bisogno per diversi shortcode e segni diversi su questo. Lo script aggiunge contenuto personalizzato allo shortcode, qui <b>FB-TESTprima e dopo il tag di chiusura e il contenuto. Puoi anche usare markup, classi css per creare una visibilità. È importante rimuovere questo contenuto sul post di salvataggio, attivato nello script PostProcess. Qui esegui lo script e rimuovi il contenuto personalizzato tramite la funzione restoreShortcodes.

Ma attualmente è così semplice, forse non valido per ogni requisito. Forse dovresti memorizzare lo shortcode su init e ripristinarlo con questa variabile memorizzata.

Immagine dello schermo

Guarda lo screenshot come esempio per capire il risultato.

inserisci qui la descrizione dell'immagine

fonte

Il sorgente ha bisogno di questa struttura di directory per usarlo:

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

Inizialmente un piccolo file php, che include l'origine come plugin nell'ambiente wp. Lascialo nella directory principale del 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;
}

Questo file php carica un javascript come plugin nell'editor visivo. Il plug-in verrà caricato solo sulle pagine di amministrazione, solo sulle pagine con stringa post.php- vedi if ( 'post.php' === $page ) {.

La seguente fonte è il file javascript, chiamato fb_shortcode_replace.js. Lascialo nella directory assets/js/, all'interno della directory dei plugin di questo 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 );
        }
    } );
} );

Utile

Suggerimento aggiuntivo

Il plugin Raph converte i codici brevi in ​​HTML per visualizzarlo e semplificare la comprensione del risultato. Forse è utile anche in questo contesto.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.