web-dev-qa-db-fra.com

Changer l'apparence du texte shortcode dans l'éditeur

Est-il possible de changer l'apparence des codes courts dans l'éditeur ou de quelque manière que ce soit pour les différencier du texte environnant?

Par exemple, si le contenu d'un message est comme ça ...

Site de référence sur Lorem Ipsum, donnant des informations sur ses origines, ainsi qu'un générateur aléatoire de Lipsum. Site de référence sur Lorem Ipsum, fournissant des informations sur ses origines, ainsi qu'un générateur aléatoire de Lipsum. [Shortcode] asfdasfd [/ shortcode] Site de référence sur Lorem Ipsum, donnant des informations sur ses origines, ainsi qu'un générateur aléatoire de Lipsum.Site de référence sur Lorem Ipsum, fournissant des informations sur ses origines, ainsi qu'un générateur aléatoire de Lipsum.Site de référence sur Lorem Ipsum, fournissant des informations sur ses origines, ainsi qu'un générateur aléatoire de Lipsum.

... ça serait bien si le shortcode à l'intérieur est en gras, alors ça se voit facilement:

 enter image description here 

shortcodethe-content
11
Ivan Topić

Vous pouvez ajouter un plugin personnalisé à WordPress et également à l'éditeur visuel TinyMCE. La source suivante est un exemple qui fonctionne simplement et ajoute une chaîne avant et après tout le shortcode.

Usage

Le shortcode trouvera via regex, pertinent si vous en avez besoin pour différents shortcodes et marques différentes à ce sujet. Le script ajoute un contenu personnalisé au shortcode, ici <b>FB-TEST avant et après la balise de fermeture et le contenu. Vous pouvez également utiliser des classes de balisage, css pour créer une visibilité. L'important est que vous supprimiez ce contenu lors de l'enregistrement, déclenché dans le script sur PostProcess. Ici, exécutez le script et supprimez le contenu personnalisé via la fonction restoreShortcodes.

Mais, actuellement, est-ce simple, peut-être pas valable pour chaque exigence Peut-être devriez-vous stocker le shortcode sur init et restaurer avec cette variable stockée.

Capture d'écran

Voir la capture d'écran à titre d'exemple pour comprendre le résultat.

 enter image description here 

La source

La source a besoin de cette structure de répertoire pour l'utiliser:

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

Au début, un petit fichier php, qui inclut la source en tant que plugin dans l'environnement wp. Laissez-le dans le répertoire principal du 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;
}

Ce fichier php charge un javascript en tant que plugin dans l'éditeur visuel. Le plugin ne se chargera que sur les pages d’administrateur, uniquement les pages avec la chaîne post.php - voir if ( 'post.php' === $page ) {.

La source suivante est le fichier javascript, nommé fb_shortcode_replace.js. Laissez-le dans le répertoire assets/js/, à l'intérieur du répertoire plugin de ce 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

Indice supplémentaire

Le plugin Raph convertir des shortcodes en HTML pour le visualiser et simplifier pour comprendre le résultat. Peut-être que cela est également utile dans ce contexte.

12
bueltge