J'ai ajouté avec succès une feuille de style TinyMCE en utilisant add_editor_style () afin de pouvoir prévisualiser les styles dans le corps de l'éditeur TinyMCE.
Cependant, ai-je raison de supposer que la fonction add_editor_style () ne peut accéder au style que pour le corps de l'éditeur?
Si oui, existe-t-il une autre méthode ou fonction que je peux utiliser pour accéder au style de la liste déroulante Format TinyMCE également?
Vous ne pouvez pas améliorer la liste déroulante formatselect. Mais vous pouvez améliorer avec le crochet tiny_mce_before_initle deuxième menu déroulant styleselect, il y a cacher dans une installation WordPress par défaut. La documentation répertorie tous les paramètres par défaut et toutes les possibilités.
Notez que, par défaut, la liste déroulante Style est masquée dans WordPress. Ajoutez d'abord le bouton pour les formats personnalisés à une barre de menu de TinyMCE, dans l'exemple de la ligne 2 avec crochet mce_buttons_2.
add_filter( 'mce_buttons_2', 'fb_mce_editor_buttons' );
function fb_mce_editor_buttons( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}Améliorez ensuite la liste déroulante de ce bouton. Également utile l'amélioration via une valeur supplémentaire dans le tableau, voir le codex pour cet exemple.
/**
* Add styles/classes to the "Styles" drop-down
*/
add_filter( 'tiny_mce_before_init', 'fb_mce_before_init' );
function fb_mce_before_init( $settings ) {
$style_formats = array(
array(
'title' => 'Download Link',
'selector' => 'a',
'classes' => 'download'
),
array(
'title' => 'My Test',
'selector' => 'p',
'classes' => 'mytest',
),
array(
'title' => 'AlertBox',
'block' => 'div',
'classes' => 'alert_box',
'wrapper' => true
),
array(
'title' => 'Red Uppercase Text',
'inline' => 'span',
'styles' => array(
'color' => 'red', // or hex value #ff0000
'fontWeight' => 'bold',
'textTransform' => 'uppercase'
)
)
);
$settings['style_formats'] = json_encode( $style_formats );
return $settings;
}
Vous pouvez également améliorer la liste déroulante avec un menu arborescent. Créez la var à partir de l'exemple de source ci-dessus avec plus de structure dans le tableau, comme la source suivante.
$style_formats = array(
array(
'title' => 'Headers',
'items' => array(
array(
'title' => 'Header 1',
'format' => 'h1',
'icon' => 'bold'
),
array(
'title' => 'Header 2',
'format' => 'h2',
'icon' => 'bold'
)
)
),
array(
'title' => 'Download Link',
'selector' => 'a',
'classes' => 'download'
)
);
Pour plus de possibilités et de paramètres, voir les valeurs par défaut du champ déroulant Format de style (écrire en javascript).
var defaultStyleFormats = [
{title: 'Headers', items: [
{title: 'Header 1', format: 'h1'},
{title: 'Header 2', format: 'h2'},
{title: 'Header 3', format: 'h3'},
{title: 'Header 4', format: 'h4'},
{title: 'Header 5', format: 'h5'},
{title: 'Header 6', format: 'h6'}
]},
{title: 'Inline', items: [
{title: 'Bold', icon: 'bold', format: 'bold'},
{title: 'Italic', icon: 'italic', format: 'italic'},
{title: 'Underline', icon: 'underline', format: 'underline'},
{title: 'Strikethrough', icon: 'strikethrough', format: 'strikethrough'},
{title: 'Superscript', icon: 'superscript', format: 'superscript'},
{title: 'Subscript', icon: 'subscript', format: 'subscript'},
{title: 'Code', icon: 'code', format: 'code'}
]},
{title: 'Blocks', items: [
{title: 'Paragraph', format: 'p'},
{title: 'Blockquote', format: 'blockquote'},
{title: 'Div', format: 'div'},
{title: 'Pre', format: 'pre'}
]},
{title: 'Alignment', items: [
{title: 'Left', icon: 'alignleft', format: 'alignleft'},
{title: 'Center', icon: 'aligncenter', format: 'aligncenter'},
{title: 'Right', icon: 'alignright', format: 'alignright'},
{title: 'Justify', icon: 'alignjustify', format: 'alignjustify'}
]}
];Maintenant, c'est le dernier point, que vous incluez le CSS personnalisé pour ces formats, via le crochet mce_css.
/**
* Apply styles to the visual editor
*/
add_filter( 'mce_css', 'fb_mcekit_editor_style');
function fb_mcekit_editor_style($url) {
if ( ! empty( $url ) )
$url .= ',';
// Retrieves the plugin directory URL
// Change the path here if using different directories
$url .= trailingslashit( plugin_dir_url( __FILE__ ) ) . '/my-editor-styles.css';
return $url;
}N'oubliez pas d'ajouter également ces règles de feuille de style à la feuille de style front-end.
Comme amélioration, vous pouvez supprimer le formatselectbouton déroulant via la vérification de la valeur dans le tableau de boutons. Ajoutez la source de suivi à la fonction fb_mce_editor_buttonsau niveau du crochet mce_buttons_2.
$value = array_search( 'formatselect', $buttons );
if ( FALSE !== $value ) {
foreach ( $buttons as $key => $value ) {
if ( 'formatselect' === $value )
unset( $buttons[$key] );
}
}
formatselectdéroulante. Ce menu déroulant n'a pas de fonction pour construire un menu, il s'agit de valeurs statiques dans le tinymce.js de WP.$settings['style_formats_merge'] = true;à »fb_mce_before_init ()«.Selon cette réponse , la clé pour faire apparaître les styles dans la liste déroulante est de
unset($settings['preview_styles']);la source
Très utile et merci pour les
defaultstylespointeurs. J'ai trouvé que la fusion des tableaux ne fonctionnait pas jusqu'à la conversion de ces options par défaut en JSON valide (pas JavaScript valide). Ci-dessous permet d' ajouter la liste déroulante de WordPress au lieu de remplacerOptions par défaut (JSON):
Dans functions.php retourne le hachage des options les plus grandes:
la source
$settings['style_formats_merge'] = true;à »fb_mce_before_init ()«.