Editör içindeki kısa kod metninin görünümünü değiştirme

Editördeki kısa kodların görünümünü değiştirmek veya onu çevreleyen metinden daha ayırt edilebilir kılmak mümkün müdür?

Örneğin, bir gönderinin içeriği böyle ise ...

Rastgele bir Lipsum jeneratörünün yanı sıra, kökenleri hakkında bilgi veren Lorem Ipsum hakkında referans sitesi. hakkında bir rastgele Lipsum jeneratörü yanı sıra, kökenleri hakkında bilgi veren Lorem Ipsum hakkında. ve rastgele bir Lipsum jeneratörü.

... içindeki kısa kodun kalın olması güzel olur, böylece kolayca şöyle görülebilir:

WordPress'e ve ayrıca TinyMCE görsel düzenleyiciye özel bir eklenti ekleyebilirsiniz. Aşağıdaki kaynak, basit çalışan ve tüm kısa koddan önce ve sonra bir dize ekleyen bir örnektir.

kullanım

Kısa kod, farklı kısa kodlar ve farklı işaretler için ihtiyacınız varsa, regex yoluyla ilgili olacaktır. Komut dosyası, burada <b>FB-TEST, kapanış etiketinden ve içeriğinden önce ve sonra kısa koda özel içerik ekler . Görünürlük oluşturmak için biçimlendirme, css sınıflarını da kullanabilirsiniz. Önemli olan, kayıt sonrası üzerinde bu içeriği kaldırmanız, komut dosyasında çalıştırmanızdır PostProcess. Burada komut dosyasını çalıştırın ve işlev aracılığıyla özel içeriği kaldırın restoreShortcodes.

Ancak, şu anda bu basittir, belki de her gereksinim için geçerli değildir. Belki kısa kodu init'te saklamalı ve bu saklanan değişkenle geri yüklemelisiniz.

Ekran görüntüsü

Sonucu anlamak için ekran görüntüsüne örnek olarak bakın.

Kaynak

Kaynak kullanmak için bu dizin yapısına ihtiyaç duyar:

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

İlk başta kaynağı wp ortamında eklenti olarak içeren küçük bir php dosyası. Eklentinin ana dizininde bırakın 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;
}

Bu php dosyası, görsel düzenleyicide eklenti olarak bir javascript yükler. Eklenti yalnızca yönetici sayfalarına yüklenir, yalnızca dizeli sayfalara yüklenir post.php- bkz if ( 'post.php' === $page ) {.

Aşağıdaki kaynak adlı javascript dosyasıdır fb_shortcode_replace.js. assets/js/Bu dizinde, bu eklentinin eklenti dizininin içinde bırakın .

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

Faydalı

• Sorularınızla ilgili yorumlar.
• https://core.trac.wordpress.org/browser/tags/4.4.2/src/wp-includes/js/tinymce/plugins/wpgallery/plugin.js

Ek ipucu

Raph eklentisi , görüntülemek ve sonucu anlamak için basitleştirmek için kısa kodları html'ye dönüştürür. Belki de bu bağlamda faydalıdır.