Joomla教程菜鸟教程如何在WP3.9中自定义TinyMCE4

如果你看 class-wp-editor.php 您会发现您正在使用的过滤器仍然存在，但是设置不同。

self::$first_init = array( 'theme' => 'modern', 'skin' => 'lightgray', 'language' => self::$mce_locale, 'formats' => "{ alignleft: [ {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'left'}}, {selector: 'img,table,dl.wp-caption', classes: 'alignleft'} ], aligncenter: [ {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'center'}}, {selector: 'img,table,dl.wp-caption', classes: 'aligncenter'} ], alignright: [ {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'right'}}, {selector: 'img,table,dl.wp-caption', classes: 'alignright'} ], strikethrough: {inline: 'del'} }", 'relative_urls' => false, 'remove_script_host' => false, 'convert_urls' => false, 'browser_spellcheck' => true, 'fix_list_elements' => true, 'entities' => '38,amp,60,lt,62,gt', 'entity_encoding' => 'raw', 'keep_styles' => false, 'paste_webkit_styles' => 'font-weight font-style color', // Limit the preview styles in the menu/toolbar 'preview_styles' => 'font-family font-size font-weight font-style text-decoration text-transform', 'wpeditimage_disable_captions' => $no_captions, 'wpeditimage_html5_captions' => current_theme_supports( 'html5', 'caption' ), 'plugins' => implode( ',', $plugins ), ); 

我猜，但我认为你需要改变你的目标数组键 formats.

编辑 保留它，但 OP 确认这不会做他正在尝试的事情。

function mce_mod( $init ) { $init['formats'] = "{ alignleft: [ {selector: 'p,h3,h4,td,th,div,ul,ol,li', styles: {textAlign:'left'}}, {selector: 'img,table,dl.wp-caption', classes: 'alignleft'} ], aligncenter: [ {selector: 'p,h3,h4,td,th,div,ul,ol,li', styles: {textAlign:'center'}}, {selector: 'img,table,dl.wp-caption', classes: 'aligncenter'} ], alignright: [ {selector: 'p,h3,h4,td,th,div,ul,ol,li', styles: {textAlign:'right'}}, {selector: 'img,table,dl.wp-caption', classes: 'alignright'} ], strikethrough: {inline: 'del'} }"; return $init; } add_filter('tiny_mce_before_init', 'mce_mod'); 

请记住，这是完全未经测试的，所以你的里程可能会有所不同。 （并且在测试之前不要在生产站点上使用）。

继续前进

深入挖掘这些格式似乎是一个自定义的 tinyMCE 按钮。 你可以看到 formatselect 按钮被添加到 mce_buttons_2 在里面 class-wp-editor.php. 然后我追踪到 tinymce.js :

 editor.addButton('formatselect', function() { var items = [], blocks = createFormats(editor.settings.block_formats || 'Paragraph=p;' + 'Address=address;' + 'Pre=pre;' + 'Heading 1=h1;' + 'Heading 2=h2;' + 'Heading 3=h3;' + 'Heading 4=h4;' + 'Heading 5=h5;' + 'Heading 6=h6' ); 

考虑到这一点，我认为新目标是 1.（理想情况下）改变 editor.settings.block_formats 或 2. 通过过滤删除该按钮 mce_buttons_2 并添加您自己的自定义版本。

测试和工作

function mce_mod( $init ) { $init['block_formats'] = 'Paragraph=p;Heading 3=h3;Heading 4=h4'; $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' ) ); $init['style_formats'] = json_encode( $style_formats ); $init['style_formats_merge'] = false; return $init; } add_filter('tiny_mce_before_init', 'mce_mod'); function mce_add_buttons( $buttons ){ array_splice( $buttons, 1, 0, 'styleselect' ); return $buttons; } add_filter( 'mce_buttons_2', 'mce_add_buttons' ); 

小警告：我不确定在哪里添加下拉项本身的样式。 在 TinyMCE 示例中，“红色标题”选项是红色的。 我想不通。 如果你这样做，请告诉我。

原文链接：https://www.wordpresshy.com/363507