web-dev-qa-db-fra.com

Redimensionner la largeur de l'éditeur WYSIWYG

Juste une question simple ici, bien que mes efforts de recherche sur Google et de recherche n'aient pas trouvé la réponse. Je souhaite redimensionner la largeur de mon éditeur WordPress WYSIWYG pour qu'elle soit 650px. Que dois-je taper dans functions.php pour obtenir cet effet?

J'ai trouvé ça mais ça n'a rien fait

add_action('admin_print_styles-edit.php','increase_textarea_css');
add_action('admin_print_styles-post-new.php','increase_textarea_css');

function increase_textarea_css() {
    ?>
    <style type="text/css">
    textarea#content { width:650px!important; }
    </style>
    <?php
}
visual-editorwysiwyg
3
kia4567

Le WYSIWYG utilise la classe .wp-editor-container. Donc, le moyen le plus simple serait de changer cela dans votre CSS. Si votre style est écrasé, ajoutez simplement !important.

.wp-editor-container {
    width:50%; // What ever size you want
}

la fonction wp_editor() nous permet également d'ajouter une classe à la balise textarea. Je ne sais pas si cela pourrait vous aider. Voici comment bien:

<?php wp_editor( $content, $editor_id, $settings = array( 'editor_class'=>'yourclass' ) ); ?>

Vous pouvez consulter la documentation ici: wp_editor - Codex

4
Kirill Fuchs

# post-body-content c'est.

Je n'ai pas eu à utiliser aucun !important:

#post-body-content {
    width:50%;
}

Note: Ceci appartient à un admin-style.css que vous utilisez pour styler la zone admin en général. (not aucun editor-style.css possible, vous devrez peut-être dénommer l'inertie du tinymce iframe). Voici comment inclure le css dans functions.php:

function add_admin_style() {
    echo '<link rel="stylesheet" type="text/css" 
        href="'.get_bloginfo('template_url').'/admin-style.css">'; //adjust your path
}
add_action('admin_head', 'add_admin_style');

Aller plus loin dans l'arborescence DOM pour le style laisserait les blocs de niveau supérieur surdimensionnés. Cela est également vrai (d’où: une mauvaise approche), si vous optez pour l’option tinyMCE respective :

function config_tinyMce($init) {
    $init['width'] = '620';
    return $init;
}
add_filter('tiny_mce_before_init', 'config_tinyMce' );

Si vous voulez une largeur d'éditeur interne particulière (par exemple, dans un monde idéal, le retour à la ligne sera identique entre l'éditeur et une colonne fixe), bien

  • soit "faites le calcul", continuez donc à ajuster la valeur de la largeur (extérieure) ci-dessus jusqu'à ce que la largeur intérieure corresponde (peut varier légèrement d'un navigateur à l'autre pour différentes largeurs de barre de défilement, etc.).
  • ou rendez-le 10-20px surdimensionné (par le moyen ci-dessus), puis effectuez le réglage précis avec le filtre de configuration tinyMCE.

update: Eh bien, peut-être effectuons-nous le calcul mathématique avec l'option tiny_mce_config, en laissant # le contenu post-body seul. Bien sûr, en mode WYSIWYG, c’est bien, si la boîte extérieure n’est pas beaucoup plus grande que la largeur réelle de la colonne. En mode HTML simple, cependant, on complique inutilement sa vie en ne pouvant voir simultanément de longues lignes de code.

2
Frank Nocke