代码段:使用类而不是内联样式进行文本对齐

时间:2017-01-26 作者:bitstarr

当您更改文本对齐方式时,WordPress的TinyMCE(WYSIWYG)编辑器正在向标记添加内联stlyes。这种行为是硬编码的wp-includes/class-wp-editor.php.

是否可以将内联样式改为类?

2 个回复
SO网友:cjbj

Note 此答案最初包含在@bitstarr\'根据WPSE的Q&;一个模型。

也许其他人会遇到这个问题,所以我将在这里与大家分享我的解决方案。

function make_mce_awesome( $init ) {
    /*
        There are easier things than make \'left/center/right align text\' to use classes instead of inline styles
     */

    // decode
    $formats = preg_replace( \'/(\\w+)\\s{0,1}:/\', \'"\\1":\', str_replace(array("\\r\\n", "\\r", "\\n", "\\t"), "", $init[\'formats\'] ));
    $formats = json_decode( $formats, true );

    // set correct values
    $formats[\'alignleft\'][0][\'classes\'] = \'text--left\';
    $formats[\'aligncenter\'][0][\'classes\'] = \'text--center\';
    $formats[\'alignright\'][0][\'classes\'] = \'text--right\';

    // remove inline styles
    unset( $formats[\'alignleft\'][0][\'styles\'] );
    unset( $formats[\'aligncenter\'][0][\'styles\'] );
    unset( $formats[\'alignright\'][0][\'styles\'] );

    // encode and replace
    $init[\'formats\'] = json_encode( $formats );

    return $init;
}
add_filter( \'tiny_mce_before_init\', \'mkae_mce_awesome\' );
首先,必须对设置进行编码,使其在PHP中易于使用。然后我添加类名(text--XXX) 并移除导致内联样式的零件。最后,将转换回阵列。

Bonus: 通过添加这一行,您可以使编辑器更加出色。

    $init[\'block_formats\'] = \'Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4\';
这将阻止用户使用<h1> 头条-搜索引擎优化噩梦…

我希望这对某人有用。欢迎改进!

另请参见https://wordpress.stackexchange.com/a/141539

SO网友:Nic Bug

cjbj给出了很好的答案,但必须对其进行双重编码才能获得嵌套数组(而不是对象)并访问类/样式条目:

$formats = preg_replace( \'/(\\w+)\\s{0,1}:/\', \'"\\1":\', str_replace(array("\\r\\n", "\\r", "\\n", "\\t"), "", $init_array[\'formats\'] ));
$formats = json_decode( $formats );

$formats = json_decode(json_encode($formats),true);

// set correct values
$formats[\'alignleft\'][0][\'classes\'] = \'text-left\';
$formats[\'aligncenter\'][0][\'classes\'] = \'text-center\';
$formats[\'alignright\'][0][\'classes\'] = \'text-right\';

// remove inline styles
unset( $formats[\'alignleft\'][0][\'styles\'] );
unset( $formats[\'aligncenter\'][0][\'styles\'] );
unset( $formats[\'alignright\'][0][\'styles\'] );

// encode and replace
$init_array[\'formats\'] = json_encode( $formats );

相关推荐

添加自定义TinyMCE 4按钮:每个按钮必须有一个JS吗?

我正在编辑Wordpress插件,试图添加另一个按钮。我看了一下这个问题(Add custom TinyMCE 4 Button, Usable since WordPress 3.9-beta1). 但它不起作用JS文件:https://www.nonsolodiete.it/wp-content/plugins/perfect-pullquotes/perfect-pullquotes.js第二个按钮不可见JS文件(已折叠)Chrome报告的无法调试JS错误。。我能试试什么?