web-dev-qa-db-de.com

Ändern Sie das Erscheinungsbild des Kurzwahltexts im Editor

Ist es möglich, das Erscheinungsbild von Kurzwahlen im Editor zu ändern oder sie in irgendeiner Weise besser vom umgebenden Text zu unterscheiden?

Zum Beispiel, wenn der Inhalt eines Posts so ist ...

Referenz-Site über Lorem Ipsum mit Informationen zu seiner Herkunft sowie einem zufälligen Lipsum-Generator. Referenz-Site über Lorem Ipsum mit Informationen zu seiner Herkunft sowie einem zufälligen Lipsum-Generator. [Shortcode] asfdasfd [/ shortcode] Referenz-Site über Lorem Ipsum, mit Informationen zu seiner Herkunft sowie einem zufälligen Lipsum-Generator.Referenzseite über Lorem Ipsum, mit Informationen zu seiner Herkunft sowie einem zufälligen Lipsum-Generator.Referenzseite über Lorem Ipsum, mit Informationen zu seiner Herkunft, sowie einen zufälligen Lipsum-Generator.

... es wäre schön, wenn der darin enthaltene Shortcode fett wäre, damit er leicht wie folgt angezeigt werden kann:

 enter image description here 

11
Ivan Topić

Sie können ein benutzerdefiniertes Plugin zu WordPress und auch zum visuellen TinyMCE-Editor hinzufügen. Die folgende Quelle ist ein Beispiel, das einfach funktioniert und einen String vor und nach dem Shortcode hinzufügt.

Verwendungszweck

Der Shortcode wird über Regex gefunden, relevant, wenn Sie ihn für unterschiedliche Shortcodes und unterschiedliche Markierungen benötigen. Das Skript fügt dem Shortcode benutzerdefinierten Inhalt hinzu, hier <b>FB-TEST vor und nach dem schließenden Tag und dem Inhalt. Sie können auch CSS-Klassen für Markups verwenden, um eine Sichtbarkeit zu erstellen. Wichtig ist, dass Sie diesen Inhalt beim Speichern des Posts entfernen, der im Skript für PostProcess ausgelöst wurde. Führen Sie hier das Skript aus und entfernen Sie den benutzerdefinierten Inhalt über die Funktion restoreShortcodes.

Derzeit ist dies jedoch einfach und möglicherweise nicht für jede Anforderung gültig. Vielleicht sollten Sie den Shortcode bei init speichern und mit dieser gespeicherten Variablen wiederherstellen.

Bildschirmfoto

Sehen Sie sich den Screenshot als Beispiel an, um das Ergebnis zu verstehen.

 enter image description here 

Quelle

Die Quelle benötigt diese Verzeichnisstruktur, um sie zu verwenden:

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

Zunächst eine kleine PHP-Datei, die den Quellcode als Plugin in der WP-Umgebung enthält. Belassen Sie es im Hauptverzeichnis des Plugins 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;
}

Diese PHP-Datei lädt ein Javascript als Plugin in den visuellen Editor. Das Plugin wird nur auf Admin-Seiten geladen, nur auf Seiten mit dem String post.php - siehe if ( 'post.php' === $page ) {.

Die folgende Quelle ist die Javascript-Datei mit dem Namen fb_shortcode_replace.js. Belassen Sie es im Verzeichnis assets/js/ im Plugin-Verzeichnis dieses Plugins.

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

Hilfreich

Zusätzlicher Hinweis

Das Plugin Raph konvertiert Shortcodes in HTML, um es anzuzeigen und das Ergebnis zu vereinfachen. Vielleicht ist es auch in diesem Zusammenhang hilfreich.

12
bueltge