Resizing the wordpress editor

时间：2012-06-11 作者：kia4567

我一直在研究如何重新调整wordpress的所见即所得编辑器的大小，并使用firebug重新调整了#post body内容的大小，但它从未调整大小。它将在firebug应用程序中调整大小，但在我将其放入我的样式时不会调整大小。我的工具箱主题的css。

#post-body-content {
    width:650px !important;
}
我是否需要在函数中添加一些内容。php页面？

Site is here

使现代化

我已将提供的代码放入函数中。php文件，它工作了，但只有一半。我试图为我看到的另一个零件放置另一种样式，但它没有应用该样式。新功能中是否只允许使用一种样式？

enter image description here

内容后面的一行是新调整大小的编辑器，但内容仍在溢出。是不是因为微型MCE工具栏？

4 个回复
SO网友:Tom J Nowell

与其调整编辑器的大小，不如调整TinyMCE实例内的内部表示，以便内容本身永远不会通过该行。这样，编辑器就可以编辑任意宽度的内容，而且内容永远不会比预期的更宽

首先在函数中添加编辑器样式。php

function my_theme_add_editor_styles() {
    add_editor_style( \'custom-editor-style.css\' );
}
add_action( \'init\', \'my_theme_add_editor_styles\' );
内部自定义编辑器样式。css输入：

body#tinymce.wp-editor { 
    width:600px;
    margin-left: auto;
    margin-right: auto;
}
这将使可编辑区域内的内容以600px宽的列为中心。

使用此方法，可以设置可编辑区域的样式，使其看起来像前端，从而使所见即所得编辑器更加逼真

e、 g.我自己的网站：

enter image description here

SO网友:Pontus Abrahamsson

您必须将css添加到主题中的WordPress管理部分functions.php 文件中包含以下操作之一：

function my_custom_css() {
  echo \'<style type="text/css">
  #post-body-content,
  .postdivrich {
    width:650px !important;
  }
  </style>\';
}

add_action(\'admin_head\', \'my_custom_css\');
或者，如果您想要更多的控制，并将添加更多的css，请在您的主题文件夹中加载一个新的css文件，就像在css作为样式表我的样式的文件夹中这样。css：

function my_admin_styles() {
   if ( !is_admin() )
   wp_enqueue_style(\'my-custom-style\', get_template_directory_uri() . \'/css/my-style.css\',false,\'1.1\',\'all\');
}
add_action(\'wp_enqueue_scripts\',\'my_admin_styles\');
出于好奇，为什么要将编辑器设置为650px宽度？

SO网友:Durthar

在函数中输入以下内容。php文件：

    function custom_max_width_editor() {
echo \'<style type="text/css">#post-body-content textarea#content, #content_ifr { max-width:650px;}</style>\';
}

add_action(\'admin_head\', \'custom_max_width_editor\');

SO网友:Ralf912

尝试明确设置编辑器的宽度

add_filter(
    \'tiny_mce_before_init\',
    function( $in ) {
        $in[\'width\']  = \'600px\';
        return $in;
    }
);

add_action(
    \'admin_init\',
    function() {
        add_editor_style( \'custom-editor-style.css\' );
    }
 );
还应调整编辑器所在容器的大小

add_action(
    \'admin_print_scripts-post-new.php\',
    function() { echo \'<style>#wp-content-wrap, #post-status-info { width: 600px; }</style>\'; },
    10,
    0
);

结束
标签： visual-editor   小码农  

相关推荐