web-dev-qa-db-fra.com

Comment ajouter un style editor-style.css à wp_editor au niveau du frontal pour les commentaires

Comment puis-je appliquer mon propre css (pour faire correspondre editor-style.css) à wp_editor utilisé au début pour les commentaires?

Actuellement, j'utilise code à partir d'ici pour activer l'éditeur visuel de commentaires.

Mon code actuel dans 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;
}

Comme vous pouvez le voir dans le code, je passe un style CSS dans wp_editor avec le paramètre editor_css, mais il est rendu en dehors de la iframe et n'a donc aucun effet.

Vous pouvez voir cette déclaration de style et iframe dans le source ici .

commentsvisual-editorwp-editoriframe
1
jb510

En fait, vous pouvez inclure le fichier editor-style.css (ou n’importe quelle autre feuille de style), il suffit de transmettre une valeur "content_css" à tinymce qui pointe vers un fichier css:

wp_editor( 
    $content, 
    'editablecontent', 
    array( 
       'tinymce' => array( 
            'content_css' => get_stylesheet_directory_uri() . '/editor-styles.css' 
       ) 
    );

Le code original des affiches ressemblerait à ceci:

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;
}
6
Randall Runnels

vous ne pouvez pas créer de lien vers des fichiers de style ici, mais vous pouvez également ajouter des fichiers CSS intégrés: Vous pouvez également ajouter une classe personnalisée à l'aide de laquelle vous pouvez écrire des fichiers CSS dans votre fichier CSS principal.

$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 );
2
Md Toufiqul Islam

Dans WP 3.9.1 lorsque vous passez tinymce setting en frontal, il ne parvient pas à charger inlinepopups plugin pour une raison quelconque.

Ainsi, vous pouvez définir les styles d'éditeur à l'aide de variables globales sans que cela brise la logique utilisée pour charger les plugins.

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

J'utilise wp_editor () sous une forme que je construis pour les messages d'invité. Afin de donner à l'arrière-plan le style dont j'avais besoin, j'ai ajouté ce qui suit à mon CSS:

.wp_themeSkin iframe{
    background: #FFF !important;
}

Cela le forcera à remplacer l'autre CSS qui est ajouté au formulaire.

0
Micah