如何在前端的wp_EDITOR中添加EDITOR-Style.css样式以获得评论

时间：2012-06-08 作者：jb510

如何应用自己的css（以匹配editor-style.css) 到wp_editor 在前端用于评论？

目前我正在使用code from here 启用注释的可视化编辑器。

我的实际代码functions.php:

add_filter( \'comment_form_defaults\', \'custom_comment_form_defaults\' );
function custom_comment_form_defaults( $args ) {
    if ( is_user_logged_in() ) {
        $mce_plugins = \'inlinepopups, wordpress, wplink, wpdialogs\';
    } else {
        $mce_plugins = \'fullscreen, wordpress\';
    }
    add_filter( \'wp_default_editor\', create_function(\'\', \'return "tinymce";\') );
    ob_start();
    wp_editor( \'\', \'comment\', array(
        \'media_buttons\' => false,
        \'teeny\' => true,
        \'textarea_rows\' => \'7\',
        \'tinymce\' => array( \'plugins\' => $mce_plugins ),
        \'editor_css\' => \'<style> p { font-family: Arial } </style>\'
    ) );
    $args[\'comment_field\'] = ob_get_clean();
    return $args;
}
正如你在代码中看到的，我将css样式传递到wp_editor 使用editor_css param，但是它在iframe 所以它没有影响。

您可以看到样式声明和iframein the source here.

4 个回复
最合适的回答,由SO网友:Randall Runnels 整理而成

实际上，您可以包含编辑器样式。css（或任何其他样式表），只需将“content\\u css”值传递给指向css文件的tinymce即可：

wp_editor( 
    $content, 
    \'editablecontent\', 
    array( 
       \'tinymce\' => array( 
            \'content_css\' => get_stylesheet_directory_uri() . \'/editor-styles.css\' 
       ) 
    );
因此，海报的原始代码如下所示：

add_filter( \'comment_form_defaults\', \'custom_comment_form_defaults\' );
function custom_comment_form_defaults( $args ) {
    if ( is_user_logged_in() ) {
        $mce_plugins = \'inlinepopups, wordpress, wplink, wpdialogs\';
    } else {
        $mce_plugins = \'fullscreen, wordpress\';
    }
    add_filter( \'wp_default_editor\', create_function(\'\', \'return "tinymce";\') );
    ob_start();
    wp_editor( \'\', \'comment\', array(
        \'media_buttons\' => false,
        \'teeny\' => true,
        \'textarea_rows\' => \'7\',
        \'tinymce\' => array( 
            \'plugins\' => $mce_plugins, 
            \'content_css\' => get_stylesheet_directory_uri() . \'/editor-styles.css\'
        )
    ) );
    $args[\'comment_field\'] = ob_get_clean();
    return $args;
}

SO网友:Md Toufiqul Islam

您不能在此处链接到样式表文件，而是可以按如下方式添加内联css：除此之外，您还可以添加一个自定义类，使用该类可以在主css文件中编写css。

$mystyle = \'<style type="text/css">
           body{margin:0;padding:0}
           </style>\';    

$settings = array(
    \'editor_css\' => $mystyle, 
    \'editor_class\' => \'myclass\'
);
wp_editor($content, $editor_id, $settings );

SO网友:Micah

我正在为来宾帖子构建的表单中使用wp\\u editor（）。为了让背景按照我需要的方式进行样式设置，我在CSS中添加了以下内容：

.wp_themeSkin iframe{
    background: #FFF !important;
}
这将强制它覆盖正在添加到表单中的其他CSS。

SO网友:Dan

在WP 3.9.1中，当您通过tinymce 设置在前端，无法加载inlinepopups 出于某种原因的插件。

所以您可以通过全局变量设置编辑器样式，它不会破坏加载插件所使用的任何逻辑。

$GLOBALS[\'editor_styles\'] = array(get_stylesheet_directory_uri() . \'/css/editor_style.css\');

结束
标签： comments   visual-editor   wp-editor   iframe   小码农  

相关推荐

更改Comments.php和header.php后带有注释的页面上的无限循环

我使用的是wordpress的3.3.1版，但我遵循的是使用2.7版的教程。更改标题后。php和注释。php代码，当我查看带有注释的单个帖子页面时，我得到了一个无限循环。这是我在<head> 标题中的标记。php：<?php if(is_singular()){ wp_enqueue_script(\'comment-reply\');} ?> <?php wp_head(); ?> 以下是完整的评论。php代码：<?php &#