Agregué con éxito una hoja de estilo TinyMCE usando add_editor_style () para poder obtener una vista previa de los estilos en el cuerpo del editor TinyMCE.
Sin embargo, ¿estoy en lo cierto al suponer que la función add_editor_style () solo puede acceder al estilo para el cuerpo del editor?
Si es así, ¿hay otro método o función que pueda usar para acceder al estilo del menú desplegable Formato TinyMCE?
No puede mejorar la lista desplegable formatselect. Pero puede mejorar con el gancho tiny_mce_before_initel segundo menú desplegable styleselect, hay ocultar en una instalación predeterminada de WordPress. La documentación enumera todos los valores predeterminados y posibilidades.
Tenga en cuenta que, de forma predeterminada, el menú desplegable Estilo está oculto en WordPress. Al principio agregue el botón para formatos personalizados a una barra de menú de TinyMCE, por ejemplo, la línea 2 con gancho mce_buttons_2.
add_filter( 'mce_buttons_2', 'fb_mce_editor_buttons' );
function fb_mce_editor_buttons( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}Luego, mejore el menú desplegable de este botón. También útil el aumento mediante valor adicional en la matriz, consulte el códice para este ejemplo.
/**
* 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;
}
También puede mejorar el menú desplegable con un menú de árbol. Cree la var a partir de la fuente de ejemplo anterior con más estructura en la matriz, como la fuente siguiente.
$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'
)
);
Para obtener más posibilidades y parámetros, consulte los valores predeterminados del campo desplegable Formato de estilo (escribir 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'}
]}
];Ahora es el último punto, que incluye el CSS personalizado para estos formatos, a través de gancho 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;
}No olvide agregar estas reglas de hoja de estilo también a la hoja de estilo frontal.
Como mejora, puede eliminar el formatselectbotón desplegable mediante la verificación del valor en la matriz de botones. Agregue la fuente de seguimiento a la función fb_mce_editor_buttonsen el gancho mce_buttons_2.
$value = array_search( 'formatselect', $buttons );
if ( FALSE !== $value ) {
foreach ( $buttons as $key => $value ) {
if ( 'formatselect' === $value )
unset( $buttons[$key] );
}
}
formatselectmenú desplegable. Este menú desplegable no tiene una función para construir un menú, son valores estáticos en el tinymce.js de WP.$settings['style_formats_merge'] = true;en »fb_mce_before_init ()«.Según esta respuesta , la clave para que los estilos aparezcan en el menú desplegable es
unset($settings['preview_styles']);fuente
Muy útil y gracias por los
defaultstylesconsejos. Descubrí que fusionar matrices no funcionaba hasta convertir esas opciones predeterminadas en JSON válido (JavaScript no válido). A continuación permite anexar desplegable del tinymce WordPress en lugar de reemplazarOpciones predeterminadas (JSON):
En functions.php devuelve el hash de opciones más grandes:
fuente
$settings['style_formats_merge'] = true;en »fb_mce_before_init ()«.