En el editor de texto, donde puede establecer encabezados y otras configuraciones, ¿es posible agregar sus propios estilos para que los clientes los usen? e incluso eliminar los innecesarios?
En el editor de texto, donde puede establecer encabezados y otras configuraciones, ¿es posible agregar sus propios estilos para que los clientes los usen? e incluso eliminar los innecesarios?
El editor "clásico" de TinyMCE tiene dos menús desplegables: formatselect
para estilos de párrafo y styleselect
para estilos de caracteres , que también pueden contener estilos de párrafo, para hacer Es más confuso. La configuración en WordPress por defecto solo muestra el menú desplegable format . Si aplica una hoja de estilo personalizada al editor, TinyMCE puede usarla para seleccionar los nombres de clase y agregarlos al menú desplegable style , pero esto no me funcionó siempre.
Desde la versión 3.0 puede llamar a add_editor_style()
en su functions.php
para agregar una hoja de estilo al editor. Por defecto está editor-style.css
en su directorio de temas. Antes de la versión 3.0, debe conectarse al filtro mce_css
para agregar la URL a la hoja de estilo de su editor. Esto terminará en el valor de configuración content_css
TinyMCE .
Para agregar el menú desplegable style , la opción styleselect
debe aparecer en uno de los arreglos de configuración de la barra de botones ( theme_advanced_buttons[1-4]
en TinyMCE, filtrado por mce_buttons_[1-4]
en WordPress). La lista de formatos de bloque está controlada por la opción theme_advanced_blockformats
de TinyMCE , que puede agregar a la matriz de control en el filtro tiny_mce_before_init
. Si desea personalizar los nombres del menú desplegable style (no solo los nombres de clase de CSS), consulte la opción theme_advanced_styles
. También puede usar la opción más avanzada style_formats
que le da más flexibilidad para definir los estilos. .
El código PHP relevante con todos los ganchos y la configuración predeterminada está en wp-admin/includes/post.php
, en la función wp_tiny_mce()
. Todos juntos, su configuración podría verse así:
add_action( 'after_setup_theme', 'wpse3882_after_setup_theme' );
function wpse3882_after_setup_theme()
{
add_editor_style();
}
add_filter('mce_buttons_2', 'wpse3882_mce_buttons_2');
function wpse3882_mce_buttons_2($buttons)
{
array_unshift($buttons, 'styleselect');
return $buttons;
}
add_filter('tiny_mce_before_init', 'wpse3882_tiny_mce_before_init');
function wpse3882_tiny_mce_before_init($settings)
{
$settings['theme_advanced_blockformats'] = 'p,h1,h2,h3,h4';
// From http://tinymce.moxiecode.com/examples/example_24.php
$style_formats = array(
array('title' => 'Bold text', 'inline' => 'b'),
array('title' => 'Red text', 'inline' => 'span', 'styles' => array('color' => '#ff0000')),
array('title' => 'Red header', 'block' => 'h1', 'styles' => array('color' => '#ff0000')),
array('title' => 'Example 1', 'inline' => 'span', 'classes' => 'example1'),
array('title' => 'Example 2', 'inline' => 'span', 'classes' => 'example2'),
array('title' => 'Table styles'),
array('title' => 'Table row 1', 'selector' => 'tr', 'classes' => 'tablerow1'),
);
// Before 3.1 you needed a special trick to send this array to the configuration.
// See this post history for previous versions.
$settings['style_formats'] = json_encode( $style_formats );
return $settings;
}
Según aquí menú desplegable del formato TinyMCE no mostrar más vistas previas de estilo
Kara lo entendió bien, necesitas borrar los estilos predeterminados para ver los nuevos estilos ...
unset($init['preview_styles']);
return $settings;
Lea otras preguntas en las etiquetas text formatting