我使用add\\u editor\\u style（）成功地添加了一个TinyMCE样式表，以便在TinyMCE编辑器的主体中预览样式。
然而，我是否正确地假设add\\u editor\\u style（）函数只能访问编辑器主体的样式？
如果是这样，是否还有其他方法或函数可用于访问TinyMCE格式下拉列表的样式？
TinyMCE：将css添加到格式下拉菜单
3 个回复
最合适的回答,由SO网友:bueltge 整理而成
无法增强下拉列表formatselect. 但你可以用钩子增强tiny_mce_before_init 第二个下拉列表styleselect, 默认WordPress安装中有隐藏。这个documentation 列出所有默认值和可能性。
inline–要生成的内联元素的名称，例如“span”。当前选定的文本将包装在此内联元素中
add_filter( \'mce_buttons_2\', \'fb_mce_editor_buttons\' );
function fb_mce_editor_buttons( $buttons ) {
array_unshift( $buttons, \'styleselect\' );
return $buttons;
}
/**
* Add styles/classes to the "Styles" drop-down
*/
add_filter( \'tiny_mce_before_init\', \'fb_mce_before_init\' );
function fb_mce_before_init( $settings ) {
// Set to true to include the default settings.
$settings[\'style_formats_merge\'] = true;
$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;
}
结果
增强的下拉菜单
您还可以使用树菜单增强下拉菜单。从上面的示例源创建变量，数组中有更多结构，比如follow源。 $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\'
)
);
有关更多可能性和参数，请参见样式格式下拉字段的默认值（使用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\'}
]}
];
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;
}
删除格式按钮作为增强功能，您可以删除formatselect 通过检查按钮数组中的值下拉按钮。将follow源添加到函数fb_mce_editor_buttons 在挂钩处mce_buttons_2.
$value = array_search( \'formatselect\', $buttons );
if ( FALSE !== $value ) {
foreach ( $buttons as $key => $value ) {
if ( \'formatselect\' === $value )
unset( $buttons[$key] );
}
}
SO网友:helgatheviking
每this answer, 使样式显示在下拉列表中的关键是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;
}
SO网友:s6712
非常有帮助，谢谢defaultstyles 指针。我发现在将这些默认选项转换为有效的JSON（不是有效的JavaScript）之前，合并数组是不起作用的。以下允许appending WordPress tinymce的下拉列表代替replacing
默认选项（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" }
] }
]\';
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;
}
结束