web-dev-qa-db-ja.com

WYSIWYGエディタの幅を変更する

ここでの単純な質問ですが、私のグーグルや検索の努力ではそれに対する答えが見つかりませんでした。私のWordPress WYSIWYGエディタの幅を650pxに変更したいです。この効果を得るにはfunctions.phpに何を入力する必要がありますか？

これを見つけたが何もしなかった

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

WYSIWYGは.wp-editor-containerクラスを使用します。したがって、最も簡単な方法はCSSでこれを変更することです。あなたのスタイルが上書きされているのなら、!importantを追加するだけです。

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

wp_editor()関数を使ってtextareaタグにクラスを追加することもできます。これが役に立つかどうかはわかりません。しかし、これはどうですか：

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

あなたはここでドキュメントを見てみることができます： wp_editor - コーデックス

4
Kirill Fuchs

＃post-body-content です。

!importantを使用する必要はありませんでした。

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

注意：これは一般に管理領域のスタイルを整えるために使用するadmin-style.cssに属します。 （notすべての可能なeditor-style.cssあなたはtinymce iframeの慣性をスタイルする必要があるかもしれません）。これはfunctions.phpにcssを含める方法です。

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');

DOMツリーをスタイル設定のために「さらに下へ」移動すると、より高いレベルのブロックが「オーバーサイズ」になります。あなたがそれぞれの tinyMCEオプション ：を選んだならば、それはまた真実です（したがって、悪いアプローチです）。

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

特定の内部エディタの幅が必要な場合（理想的な世界では、たとえばエディタと固定列のライブの間で同一の行を折り返す）、

  • 内側の幅が収まるまで（数学的に行うため）上記の（外側の）幅の値を調整し続けます（スクロールバーの幅が異なるなど、ブラウザ間で幅が異なる場合があります。
  • または（上記の方法で）それを10-20pxに特大サイズにしてから、tinyMCE設定フィルターで正確な微調整を行ってください。

update： そうですね、＃post-body-contentだけを残したままtiny_mce_configオプションを使って全体の計算を行うこともできます。確かに、WYSIWYGビューでは、外側のボックスが実際の列幅よりそれほど大きくなければ、Niceです。しかし、普通のHTMLビューでは、長いコード行を一度に見ることができないため、ライブが不必要に難しくなります。

2
Frank Nocke