it-swarm-eu.dev

Jak upravit aktuální odstavcový rozpis v TinyMCE s vlastními styly textu

Chci dát backend-uživatelům pouze 4 styly textu z čeho vybírat. Titulek, podnadpis, odstavec a styl nazvaný .statement.

Vyhledávání termínů jako "vlastní styly v TinyMCE" vždy skončil s tímto článkem z wordpress sám. https://codex.wordpress.org/TinyMCE_Custom_Styles

enter image description here

Bohužel nechci zpřístupnit další rozevírací seznam. Potřebuji odstranit aktuální rozevírací obsah a naplnit ho vlastními styly.

V prvním kroku se vlastně nestarám o to, jak vypadají jak v rozevíracím seznamu, tak v samotném vizuálním editoru. Klíčem k tomu je odstranit zbytečné možnosti stylingu; možnosti design a frontend nepodporují. (I když by bylo skvělé změnit vzhled uvnitř editoru)

.

function my_mce_before_init_insert_formats( $init_array ) {

Podíval jsem se na $init_array a nemohl jsem najít, kde je rozevírací seznam vytvořen.

Nadšený pro vaše návrhy :)

Louis!

3
kater louis

Měl jsem stejný problém a tady je to, co můžete udělat. Níže uvedený kód zakáže značku h1 z oddílu formátů bloků. Stejným způsobem můžete zakázat další značky a také přidat vlastní. Ale nejsem si jistý, jak k nim přidat vlastní styly CSS. Doufám, že tento kód vám dá nápovědu, jakým způsobem Dig.

//Modify TinyMCE editor to hide H1. 
function tiny_mce_remove_unused_formats( $initFormats ) {
    // Add block format elements you want to show in dropdown
    $initFormats['block_formats'] = 'Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Preformatted=pre';
    return $initFormats;
}
add_filter( 'tiny_mce_before_init', 'tiny_mce_remove_unused_formats' );


Aktualizovat:

To, co hledáte, bylo možné před vydáním Wordpressu 3.9. Dříve jste museli napsat tyto řádky kódu, aby to bylo možné. theme_advanced_styles je bohužel zastaralý, protože WP 3.9 aktualizoval TinyMCE na verzi 4 ( viz Change Log ). Více informací na blogu Andrew Ozz .

Tak to bylo dříve ( zdroj ):

function make_mce_awesome( $init ) {
    // deprecated settings
    $init['theme_advanced_blockformats'] = 'h2,h3,h4,p';
    $init['theme_advanced_disable'] = 'underline,spellchecker,wp_help';
    $init['theme_advanced_text_colors'] = '0f3156,636466,0486d3';
    $init['theme_advanced_buttons2_add'] = 'styleselect';
    $init['theme_advanced_styles'] = "bigTitle=bigTitle;Call To Action Button=ctaButton,Rounded Corners=rounded";
    return $init;
}

add_filter('tiny_mce_before_init', 'make_mce_awesome');


Řešení:

Každopádně mám své řešení pro váš úkol. Můžete se zbavit výchozího rozevíracího seznamu a přidat do něj formáty se čtyřmi styly. To vám pomůže vyhnout se zmatkům s uživateli, z čeho vybírají styly.

Zakázat výchozí rozevírací nabídku:

function remove_default_format_select( $buttons ) {
    //Remove the format dropdown select and text color selector
    $remove = array( 'formatselect' );

    return array_diff( $buttons, $remove );
 }
add_filter( 'mce_buttons', 'remove_default_format_select' );


Přidat nový rozevírací seznam Formáty ( více zde ):

// Callback function to insert 'styleselect' into the $buttons array
function my_new_mce_buttons( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}
// Register our callback to the appropriate filter
add_filter( 'mce_buttons', 'my_new_mce_buttons' );


// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {  
    // Define the style_formats array
    $style_formats = array(
            array(
                'title' => 'Headline',
                'block' => 'h1'
                ),
            array(
                'title' => 'SubHeadline',
                'block' => 'h2'
                ),
            array(
                'title' => 'Statement',
                'block' => 'div',
                'classes' => 'statement_class',
                'wrapper' => true
            )
        );
    // Insert the array, JSON ENCODED, into 'style_formats'
    $init_array['style_formats'] = json_encode( $style_formats );  

    return $init_array;  

} 
// Attach callback to 'tiny_mce_before_init' 
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );


Poslední. Zaregistrujte soubor css a získejte vizuální vzhled v editoru: ( Další informace

/**
 * Registers an editor stylesheet for the theme.
 */
function wpdocs_theme_add_editor_styles() {
    add_editor_style( 'custom-editor-style.css' );
}
add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );


Snad to pomůže.

5
Vlad