我刚读过an article 关于如何在Wordpress Tiny MCE中实现自定义样式。

老实说，我有点困惑，为什么我们必须向函数添加样式数组。php。

我的问题是，这些样式是作为内联CSS应用的（见图）。这是一个问题，因为它会使我的CSS文件变得无用，因为如果我稍后更改样式表，我还必须编辑所有文章，以相应地编辑内联CSS。换句话说，大

我知道我可以删除样式数组，例如删除\'borderLeftWidth\' => \'5px\', 等等但是我不会预览微型MCE中的样式。所以问题是：不是从函数中获取样式。php，如何仅从外部CSS文件加载样式？

<如图所示，当我真正想要的是外部CSS时，我得到了内联CSS

最好我想用CSS文件控制样式。

我也知道有很多插件可以做到这一点，但我希望这是主题的一部分，而不是插件。

functions.php:

// Apply styles to the visual editor
add_filter(\'mce_css\', \'tuts_mcekit_editor_style\');
function tuts_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(get_stylesheet_directory_uri()) ) . \'/tinymce.min.css\';
    return $url;
}

// Add "Styles" drop-down
add_filter( \'mce_buttons_2\', \'tuts_mce_editor_buttons\' );
function tuts_mce_editor_buttons( $buttons ) {
    array_unshift( $buttons, \'styleselect\' );
    return $buttons;
}

// Add styles/classes to the "Styles" drop-down
add_filter( \'tiny_mce_before_init\', \'tuts_mce_before_init\' );
function tuts_mce_before_init( $settings ) {

    $style_formats = array(
        array(
            \'title\' => \'Emphasis box\',
            \'block\' => \'p\',
            \'classes\' => \'emphasis-box\',
            \'styles\' => array(
                \'borderLeftWidth\' => \'5px\',
                \'borderLeftStyle\' => \'solid\',
                \'borderLeftColor\' => \'#1a1a1a\',
                \'paddingTop\' => \'10px\',
                \'paddingRight\' => \'10px\',
                \'paddingBottom\' => \'10px\',
                \'paddingLeft\' => \'25px\',
                \'backgroundColor\' => \'#f9f9f9\',
                \'borderTopLeftRadius\' => \'0px\',
                \'borderTopRightRadius\' => \'5px\',
                \'borderBottomRightRadius\' => \'5px\',
                \'borderBottomLeftRadius\' => \'0px\',
                \'fontWeight\' => \'400\',
                \'fontSize\' => \'16px\',
                \'color\' => \'#000000\'
                )
            ),
            array(
                \'title\' => \'Alert box blue\',
                \'block\' => \'section\',
                \'classes\' => \'alertbox blue\',
                \'wrapper\' => true
                ),
            array(
                \'title\' => \'Alert box yellow\',
                \'block\' => \'section\',
                \'classes\' => \'alertbox yellow\',
                \'wrapper\' => true
                ),
            array(
                \'title\' => \'Alert box red\',
                \'block\' => \'section\',
                \'classes\' => \'alertbox red\',
                \'wrapper\' => true
                ),
            array(
                \'title\' => \'Alert box green\',
                \'block\' => \'section\',
                \'classes\' => \'alertbox green\',
                \'wrapper\' => true
                ),
            array(
                \'title\' => \'Alert box pink\',
                \'block\' => \'section\',
                \'classes\' => \'alertbox pink\',
                \'wrapper\' => true
                )

    );

    $settings[\'style_formats\'] = json_encode( $style_formats );
    return $settings;
}

// Learn TinyMCE style format options at http://www.tinymce.com/wiki.php/Configuration:formats
 // Add custom stylesheet to the website front-end with hook \'wp_enqueue_scripts\'
add_action(\'wp_enqueue_scripts\', \'tuts_mcekit_editor_enqueue\');

// Enqueue stylesheet, if it exists.
function tuts_mcekit_editor_enqueue() {
  $StyleUrl = plugin_dir_url(get_stylesheet_directory_uri()).\'tinymce.min.css\'; // Customstyle.css is relative to the current file
  wp_enqueue_style( \'myCustomStyles\', $StyleUrl );
}

tinymce.min.css:

.emphasis-box {
    border-left: 5px solid #1a1a1a;
    padding: 10px 10px 10px 25px;
    background-color: #f9f9f9;
    border-radius: 0px 5px 5px 0px;
    font-weight: 400;
    font-size: 16px;
    color: #000000;
}