Ubah tampilan teks kode pendek di dalam editor


11

Apakah mungkin untuk mengubah tampilan kode pendek di editor atau dengan cara apa pun membuatnya lebih dapat dibedakan dari teks di sekitarnya?

Misalnya jika konten posting seperti ini ...

Situs referensi tentang Lorem Ipsum, memberikan informasi tentang asal-usulnya, serta generator Lipsum acak. Situs referensi tentang Lorem Ipsum, memberikan informasi tentang asal-usulnya, serta generator Lipsum acak. [Shortcode] asfdasfd [/ shortcode] Situs referensi tentang Lorem Ipsum, memberikan informasi tentang asal-usulnya, serta generator Lipsum acak. Situs referensi tentang Lorem Ipsum, memberikan informasi tentang asal-usulnya, serta generator Lipsum acak. Situs referensi tentang Lorem Ipsum, memberikan informasi tentang asal-usulnya, serta generator Lipsum acak.

... alangkah baiknya jika shortcode di dalamnya tebal sehingga dapat dengan mudah dilihat seperti ini:

masukkan deskripsi gambar di sini


Itu pasti akan mudah dan pasti dimungkinkan dengan beberapa regex / js. Berikut adalah pertanyaan serupa dan sebuah plugin yang memungkinkan Anda menambahkan pratinjau untuk kode pendek meskipun hanya menyorot semua seperti yang Anda sarankan, seperti yang Anda mau <code>atau <pre>tag pasti akan lebih sederhana.
Bryan Willis

1
Saya tahu ini tidak membantu Anda saat ini tetapi awasi Shortcake untuk segera diintegrasikan ke dalam inti ... akan membuat fitur inti yang sangat dibutuhkan ini menjadi kenyataan
brianjohnhanna

3
Kemungkinan duplikat Solusi untuk merender Kode
Pintas

/ OFF topik dari saya, @brianjohnhanna Saya telah melihat plugin itu tapi itu semacam pratinjau (jadi bagaimana tampilannya di frontend) dari kode. Jika saya memahami pertanyaan dengan baik, pertanyaan OP menyoroti shortcode tagdan contentdi dalamnya shortcodedi dalam editor.
Charles

Jawaban:


12

Anda dapat menambahkan plugin khusus, ke WordPress dan juga editor visual TinyMCE. Sumber follow adalah contoh yang berfungsi sederhana dan menambahkan string sebelum dan sesudah semua kode pendek.

Pemakaian

Kode pendek akan ditemukan melalui regex, relevan jika Anda memerlukannya untuk berbagai kode pendek dan tanda berbeda untuk ini. Script menambahkan konten khusus ke kode pendek, di sini <b>FB-TESTsebelum dan sesudah tag penutup dan konten. Anda juga dapat menggunakan markup, kelas css untuk membuat visibilitas. Yang penting adalah bahwa Anda menghapus konten ini pada save post, diaktifkan pada script on PostProcess. Di sini jalankan skrip dan hapus konten khusus melalui fungsi restoreShortcodes.

Tapi, saat ini sederhana, mungkin tidak berlaku untuk setiap persyaratan. Mungkin Anda harus menyimpan kode pendek di init dan mengembalikan dengan variabel yang disimpan ini.

Tangkapan layar

Lihat tangkapan layar sebagai contoh untuk memahami hasilnya.

masukkan deskripsi gambar di sini

Sumber

Sumber membutuhkan struktur direktori ini untuk menggunakannya:

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

Pada awalnya file php kecil, yang menyertakan sumber sebagai plugin di lingkungan wp. Biarkan di direktori utama 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;
}

File php ini memuat javascript sebagai plugin di editor visual. Plugin akan memuat hanya pada halaman admin, hanya halaman dengan string post.php- lihat if ( 'post.php' === $page ) {.

Sumber tindak adalah file javascript, bernama fb_shortcode_replace.js. Biarkan di direktori assets/js/, di dalam direktori plugin dari plugin ini.

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

Bermanfaat

Petunjuk tambahan

Plugin Raph mengonversi shortcode dalam html untuk melihatnya dan menyederhanakan untuk memahami hasilnya. Mungkin ini juga membantu dalam konteks ini.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.