在TinyMCE编辑器中将CSS类添加到链接

时间:2014-11-06 作者:maGz

在寻找解决方案的过程中,我遇到了一个插件,它支持下拉样式表中已经存在的CSS样式。我想要的是允许编辑器从文本框中添加CSS类。因此,如果你考虑一下这幅图像:

enter image description here

理想情况下,我想找到一种方法,在下面找到另一个文本框Title 已调用类。网站内的其他功能需要输入CSS类的自由。关于如何实现这一点,有什么想法吗?

非常感谢!

2 个回复
最合适的回答,由SO网友:maGz 整理而成

我可以通过添加WP Edit 插件到我的网站。它有一个高级链接按钮,允许我(或编辑器)手动键入类名。

SO网友:mrwweb

一个选项是向MCE中的Styleselect菜单添加一个类。改编自"TinyMCE Custom Styles" Codex page 首先需要将样式选择添加到编辑器中:

// Callback function to insert \'styleselect\' into the $buttons array
function my_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, \'styleselect\' );
    return $buttons;
}
// Register our callback to the appropriate filter
add_filter(\'mce_buttons_2\', \'my_mce_buttons_2\');
这将向编辑器添加新的下拉列表。然后创建自定义样式:

// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {  
    // Define the style_formats array
    $style_formats = array(  
        // Each array child is a format with it\'s own settings
        array(  
            \'title\' => \'My Link Custom Class\',  
            \'selector\' => \'a\',  
            \'classes\' => \'my-custom-link-class\'             
        )
    );  
    // Insert the array, JSON ENCODED, into \'style_formats\'
    $init_array[\'style_formats\'] = json_encode( $style_formats );  

    return $init_array;  

} 
// Attach callback to \'tiny_mce_before_init\' 
add_filter( \'tiny_mce_before_init\', \'my_mce_before_init_insert_formats\' );
从WordPress 3.9(包括TinyMCE 4.0的升级)开始,样式选择功能更加强大,包括selector 这意味着您可以定义只能应用于链接的样式。这很好。

此解决方案意味着您可以预先定义所需的类,并确保不会出现拼写错误或其他问题。

正如法典所指出的,这最好与良好的editor-style.css file 这将直接在编辑器中应用样式。

结束