我使用add_editor_style()成功添加了TinyMCE样式表,以便可以在TinyMCE编辑器的主体中预览样式。

但是,我假设add_editor_style()函数只能访问样式是正确的吗?为编辑的身体?

如果是这样,还有其他方法或函数可以用来访问TinyMCE Format下拉菜单的样式吗?



#1 楼

您无法增强下拉列表formatselect。但是您可以使用钩子tiny_mce_before_init进行增强,第二个下拉菜单styleselect则隐藏在默认的WordPress安装中。内联元素的大小以生成“ span”。当前的文本选择将包装在此内联元素中。
block –要生成的块元素的名称,例如“ h1”。选择中的现有块元素将替换为新的块元素。
选择器– CSS 3选择器模式,用于通过选择来查找选择中的元素。这可用于将类应用于特定元素或复杂的事物,例如表中的奇数行。
样式–具有要应用的CSS样式项的名称/值对象,例如颜色等。
属性–具有属性的名称/值对象,其适用于所选元素或新的内联/块元素。 > exact –使用时禁用合并相似样式的功能。
功能。对于某些CSS继承问题,这是必需的,例如用于下划线/删除线的文本修饰。例如div包装器或blockquote。

样式按钮

请注意,默认情况下,样式下拉列表隐藏在WordPress中。首先,将自定义格式的按钮添加到TinyMCE的菜单栏中,在示例2中,带有钩子mce_buttons_2

add_filter( 'mce_buttons_2', 'fb_mce_editor_buttons' );
function fb_mce_editor_buttons( $buttons ) {

    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}


自定义样式

然后增强此按钮的下拉列表。还可以通过数组中的附加值来使用增强效果,请参见本示例的编解码器。

br />增强的下拉菜单

您还可以使用树形菜单增强下拉菜单。从上面的示例源创建var,并在数组中添加更多结构,例如:following source。

参数,请参见样式格式下拉字段的默认值(使用javascript编写)。

/**
 * 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;

}


将自定义样式表添加到编辑器中最后一点是,您可以通过钩子mce_css来包含此格式的自定义css。样式表。

删除格式按钮

作为增强,您可以通过检查按钮数组中的值来删除formatselect下拉按钮。在钩子fb_mce_editor_buttons处将以下源代码添加到函数mce_buttons_2中。

    $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'
        )
    );


评论


我想我从概念上理解了这一点:本质上,您删除了WP的标准格式框,然后添加了自己的样式下拉菜单以控制样式。我的理解正确吗?

– Marc P
2014年1月8日在16:56

对。目前,我找不到钩子来更改formatselectDropdown。该下拉列表没有构建菜单的功能,是WP的tinymce.js中的静态值。

– Bueltge
2014年1月8日17:00

我现在已经找到了这个答案的提示。

– Bueltge
2014年1月8日在17:03

喔好吧!谢谢,这是一个很好的解决方案。我会尝试一下!

– Marc P
2014年1月8日在17:14

注意:可以通过添加$ settings ['style_formats_merge'] = true来将默认样式添加到格式下拉列表中。放入»fb_mce_before_init()«。

–尼古拉
15年7月30日在12:27

#2 楼

根据此答案,使样式显示在下拉菜单中的关键是unset($settings['preview_styles']);

add_filter( 'tiny_mce_before_init', 'fb_mce_before_init' );
function fb_mce_before_init( $settings ) {

    // customize as desired

    // unset the preview styles
    unset($settings['preview_styles']);`

    return $settings;
}


#3 楼

非常有帮助,感谢defaultstyles指针。我发现合并数组在将这些默认选项转换为有效JSON(无效JavaScript)后才起作用。下面允许附加WordPress tinymce的下拉列表,而不是替换

默认选项(JSON):

$defaults = '[{ "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" }
        ] }
 ]'; 


在functions.php中返回较大的选项哈希:

add_filter( 'tiny_mce_before_init', 'fb_mce_before_init' );
function fb_mce_before_init( $settings ) {

    $style_formats = array(
    //....

    $settings['style_formats'] = json_encode( array_merge( json_decode($defaults), $style_formats ) );
    return $settings;
}


评论


注意:可以通过添加$ settings ['style_formats_merge'] = true来将默认样式添加到格式下拉列表中。放入»fb_mce_before_init()«。

–尼古拉
15年7月30日在12:27