TinyMCE格式下拉菜单不再显示样式预览

时间:2013-08-30 作者:Phil

在过去,通过添加编辑器样式表,我能够在格式和样式下拉列表中看到选项,就像它们出现在帖子中一样。也就是说,菜单中的条目将根据放置在编辑器样式表中的CSS规则设置样式。

奇怪的是,这在两个都已更新为WP 3.6的站点上停止了工作。我仍然可以在编辑器内容窗口中看到自定义样式,并且这些样式仍然应用于帖子内容-它们只是不作为样式选项显示在下拉菜单中。更奇怪的是,我定义的一个自定义规则确实会显示在下拉列表中,并应用其自定义样式。

编辑器样式表实际上是通过以下内容添加的整个前端样式表,并且显然是有效的,因为样式在帖子内容中起作用;

add_action( \'init\', \'pds_add_editor_styles\' );
function pds_add_editor_styles()
      {
            add_editor_style( \'library/css/style.css\' );
      }
我通过以下方式添加自定义样式:;

add_filter( \'tiny_mce_before_init\', \'pds_mod_tinymce_editor\' );
function pds_mod_tinymce_editor( $init )
      {  
            $style_formats         = array(
                  array(
                        \'title\'    => \'90% width (centred)\',
                        \'selector\' => \'*\',
                        \'classes\'  => \'width-90-percent\',
                        \'wrapper\'  => true
                  ),
                  array(
                        \'title\'    => \'80% width (centred)\',
                        \'selector\' => \'*\',
                        \'classes\'  => \'width-80-percent\',
                        \'wrapper\'  => true
                  ),
                  array(
                        \'title\'    => \'70% width (centred)\',
                        \'selector\' => \'*\',
                        \'classes\'  => \'width-70-percent\',
                        \'wrapper\'  => true
                  ),
                  array(
                        \'title\'    => \'60% width (centred)\',
                        \'selector\' => \'*\',
                        \'classes\'  => \'width-60-percent\',
                        \'wrapper\'  => true
                  ),
                  array(
                        \'title\'    => \'50% width (centred)\',
                        \'selector\' => \'*\',
                        \'classes\'  => \'width-50-percent\',
                        \'wrapper\'  => true
                  ),
                  array(
                        \'title\'    => \'No space below\',
                        \'selector\' => \'*\',
                        \'classes\'  => \'no-bottom-margin\',
                        \'wrapper\'  => true
                  ),
                  array(
                        \'title\'    => \'Double space below\',
                        \'selector\' => \'*\',
                        \'classes\'  => \'double-bottom-margin\',
                        \'wrapper\'  => true
                  ),
                  array(
                        \'title\'    => \'Small Black\',
                        \'selector\' => \'*\',
                        \'classes\'  => \'small-black\',
                        \'wrapper\'  => true
                  ),
                  array(
                        \'title\'    => \'Big\',
                        \'selector\' => \'*\',
                        \'classes\'  => \'just-big\',
                        \'wrapper\'  => true
                  ),
                  array(
                        \'title\'    => \'Really Big\',
                        \'selector\' => \'*\',
                        \'classes\'  => \'really-big\',
                        \'wrapper\'  => true
                  ),
                  array(
                        \'title\'    => \'Super Big\',
                        \'selector\' => \'*\',
                        \'classes\'  => \'super-big\',
                        \'wrapper\'  => true
                  ),
                  array(
                        \'title\'    => \'RightHeight\',
                        \'selector\' => \'*\',
                        \'classes\'  => \'rightheight-font\',
                        \'wrapper\'  => true
                  ),
            );
            $init[\'style_formats\'] = json_encode( $style_formats );

            return $init;
      }
Format drop-down options not carrying styles

Custom styles drop-down only carrying styles for ONE custom style

在我的另一个客户站点上,这些样式工作得很好,如下面所示。此网站尚未更新到3.6。

enter image description here

我对这种情况感到非常困惑,不知道下一步该怎么办。我尝试只将相关样式添加到它们自己的样式表中,并加载它们,而不是加载整个样式。css文件,但这也不起作用。清除缓存无效。

如果有人能提供一些见解,我将不胜感激。

干杯

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

好吧,这似乎也让我发疯了completely undocumented 然而,不要担心,因为它非常容易修复!:D

在您的tiny_mce_before_init 在return语句前面的钩子函数只需添加一行:

unset($init[\'preview_styles\']);
这将使wordpress的功能与3.6更新之前一样(更新后的版本在wp includes/class-wp-editor.php[#347]中添加了一行,更改了默认行为)

据我所知,此设置限制了将在样式下拉菜单中预览的css属性。从3.6开始,设置为\'font-family font-weight text-decoration text-transform\' 默认情况下。从而导致诸如颜色、大小、线条高度等属性无法渲染。

因此,如果您不只是让一切顺其自然,还可以在允许的属性列表中添加一些特定属性:

$init[\'preview_styles\'] .= \' background-color color\';
我知道这有点晚了,但希望这将在将来有所帮助,因为从3.6.1开始,这是still 默认行为。

结束

相关推荐

占位符在Tinymce中可调整大小的原因是什么?

制作TinyMCE的插件并不难,就像Wordpress gallery在WP 3.5中所做的那样。不幸的是,这些自定义占位符始终不可调整大小,尽管它们显示大小调整器句柄。插入到贴子中的新图像可以使用句柄调整大小,嵌入的iframe可以调整大小,但新的库占位符不可调整大小(在这种情况下没有意义,库不会调整大小)。但是,我需要一个自定义占位符is 可调整大小。是否有一个特殊的类可以打开或关闭此功能,或者有一个函数需要调用才能在某个元素上调整大小?