TinyMCE Source Editor太小了

时间：2018-03-14 22:11:36

标签： css tinymce editor

这是一个奇怪的问题，我无法解决这个问题。我查看了我的CSS并修改了它，并且不认为我的样式表影响了这一点。 （只是一个简短的总结，我花了一些时间在这个上，包括访问TinyMCE网站等等。）

使用TinyMCE，我喜欢使用代码插件，但由于某些原因我在网站上使用它，代码编辑器的高度非常小。窗口是我期望的，但实际的编辑区域就像两行或更少。见下图。我希望有人可以指点我一些CSS或一些特定的我可以设置修改高度，以便它正确填充窗口......：

TinyMCE Issue With Source Editor Height

这是我的CSS文件 - 它很冗长：

  /* 
      AwardList.css

      this gives the various information necessary for maintaining the site and making
      easy updates.

      Created by Hirsch von Henford (mka Ken Mayer), Golem Herald
      February, 2018
  */

  html
  {
    /* for fixed footer */
    position: relative;
    min-height: 100%;
  }

  body 
  {  
     font-family: Arial, Helvetica, sans-serif; 
     font-size: 19px; 
     color: #000000; 
     background-color: #FFFFFF;
     margin-top: 10px;
     margin-left: 5px;
     margin-right: 5px;
     padding: 5px;

     /* for fixed footer */
     margin-bottom: 40px;
  }

  footer
  {
     width: 98%;
     margin-top: 10px;
     padding-top: 10px;
     height: 40px;
     text-align: center;
     background-color: #007B00;
     color: yellow;
     /* for fixed footer */
     position: absolute;
     bottom: 0;
  }

  input, textarea, select, option
  {
     font-family: Arial, Helvetica, sans-serif !important; 
     font-size: 19px !important;
  }

  input, select, option
  {
     height: 38px !important;
  }

  /* Seems to be necessary to get the text to line up properly */
  input[type="checkbox"], input[type="radio"]
  {
     height: 15px !important;
  }

  option /* appears this can't be done at this time which is freaking stupid */
  {
     font-family: Arial, Helvetica, sans-serif !important; 
     font-size: 19px !important;
  }

  select
  {
     height: 40px !important;
  }

  .PageTitle, .SecondaryHeader, .TertiaryHeader
  {
     font-family: Arial, Helvetica, sans-serif; 
     font-weight: bold;   
     background-color: #007B00;
     color: #FFFFFF;
     text-decoration: none;
     padding: 0px 0px 3px 0px;
  }

  .PageTitle
  {
     /* from Google fonts ... */
     font-family: Fondamento;
     font-size: 26px;
     text-align: center;
  }

  .SecondaryHeader 
  {  
     font-size: 22px; 
     padding: 3px 0px 3px 3px;
  }

  .TertiaryHeader 
  { 
     font-size: 20px; 
     padding: 3px 0px 3px 3px;
  }

  .SecondaryNoBack, .TertiaryNoBack
  {  
     font-family: Arial, Helvetica, sans-serif; 
     font-weight: bold;   
     color: #007B00;
     text-decoration: none;
  }

  .SecondaryNoBack
  {  
     font-size: 22px; 
  }

  .TertiaryNoBack
  { 
     font-size: 20px; 
  }

  h1
  {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 24px;
     color: green;
     text-align: center;
  }

  h2
  {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 22px;
     color: green;
     text-align: left;
  }

  h3
  {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 19px;
     color: green;
     text-align: left;
  }

  /* Horizontal Rule */
  hr
  {
     border: 0;
     color: #007B00;
     background-color: #007B00;
     height: 1.5px;
  }

  /* Tables */
  table.noborder
  {
     border: none;
     border-collapse: collapse; 
     border-collapse: collapse;        
  }

  table.noborder tr
  {
     border: none;
     vertical-align: top;
     text-align: left;
  }

  table.noborder th
  {
     border: none;
     font-size: 19px;
     background-color: #007B00; 
     color: #FFFFFF; 
     padding: 0.2em; 
     text-align: center;
     padding-left: 5px;
     padding-right: 5px;
  }

  table.noborder td
  {
     border: none;
     font-size: 19px;
     padding-left: 5px;
     padding-right: 5px;
  }

  table.noborder tr:hover td
  {
     background-color: #99FF99;
     border-top: 1px solid #00FF00;
     border-bottom: 1px solid #00FF00;
     color: #000000;
  }

  /* same as above, but no hover for tr: */
  table.nobordernohover
  {
     border: none;
     border-collapse: collapse; 
     border-collapse: collapse;        
  }

  table.nobordernohover tr
  {
     border: none;
     vertical-align: top;
     text-align: left;
  }

  table.nobordernohover th
  {
     border: none;
     font-size: 19px;
     background-color: #007B00; 
     color: #FFFFFF; 
     padding: 0.2em; 
     text-align: center;
     padding-left: 5px;
     padding-right: 5px;
  }

  table.nobordernohover td
  {
     border: none;
     font-size: 19px;
     padding-left: 5px;
     padding-right: 5px;
  }


  /* Table with alternating rows, colored heading ... */

  table.colored 
  { 
     border: 1px solid #007B00; 
     border-collapse: collapse; 
     background-color: #FFFFFF; 
     color: #FFFFFF; 
     font: 19px Arial, Helvetica, sans-serif; 
     width: 100%; 
  } 

  table.colored tr 
  { 
     vertical-align: top; 
     background-color: #FFFFFF; 
     color: #000000; 
  } 

  table.colored tr.even 
  { 
     background-color: #D9FFDE; 
     color: #000000; 
  }    

  table.colored th 
  { 
     border: 1px solid #007B00;
     background-color: #007B00; 
     color: #FFFFFF; 
     padding: 0.2em; 
     text-align: center; 
     vertical-align: bottom;
     font-size: 19px ; 
     font-weight: bold;
  } 

  table.colored td 
  { 
     font-size: 19px ; 
     padding: 0.2em; 
     border: 1px solid #007B00;
  } 

  table.colored tr:hover td
  {
     background-color: #99FF99;
     border-top: 1px solid #00FF00;
     border-bottom: 1px solid #00FF00;
     color: #000000;
  }


  /*
     Used specifically for the pages that display
     the award data ... (namefirstletter.php, individual.php, etc.)
  */

  table.AwardTable
  {
     border-width: 0px;
     width: 100%;
     border-collapse: collapse; 
     border-collapse: collapse;        
  }

  table.AwardTableWithHover
  {
     border-width: 0px;
     width: 100%;
     border-collapse: collapse; 
     border-collapse: collapse;        
  }

  table.AwardTable tr
  {
     vertical-align: top;
     text-align: left;
  }

  /* hover color so a row when the mouse is over it is easy to read */
  table.AwardTableWithHover tr:hover td
  {
     background-color: #99FF99;
     border-top: 1px solid #00FF00;
     border-bottom: 1px solid #00FF00;
     color: #000000;
  }

  /* Award List Specific */
  .AwardName
  {
     color: green;
     font: 20px Arial, Helvetica, sans-serif;
     text-align: left;
     border-width: 0px;
  }

  .AwardHeading
  {
     font: 18px Arial, Helvetica, sans-serif;
     text-align: left;
     border-width: 0px;
  }

  .AwardData
  {
     font: 18px Arial, Helvetica, sans-serif;
     text-align: left;
     border-width: 0px;
  }

  /*
     ----------------------------------
     Links -- match colors of main Heralds' site, but no images
     ----------------------------------
  */
  a
  {
     padding: 0px;
  }
  a:link 
  {
     color: #008000 !important;
  }
  a:visited 
  {
     color: #734f3e; 
     background: ;
  }
  a:hover 
  {
     color: #0054a6;
  }
  a:active 
  {
     color: #f22222;
  }

  /* for namecodes ... */
  .aNameCode
  {
     color: #008000 !important;
     text-decoration: none;
  }
  .aNameCode:hover
  {
     text-decoration: none;
  }

  /*
     ----------------------------------
     Override Bootstrap Navbar links, which are taking on the
     Heralds' website link colors, not cool ...:
     ----------------------------------
  */

  .dropdown > a
  {
     color: #777 !important;
  }
  .dropdown-menu > li > a,
  .dropdown-menu > li > a:hover,
  .dropdown-menu > li > a:focus,
  .dropdown-menu > li > a:visited
  {
     color: black !important;
     background-color: white;
  }

  /* Nav-Tabs similar issue as above */
  .nav-tabs > li > a
  {
     color: green !important;
     background-color: white !important;
  }

  .nav-tabs > li.active > a,
  .nav-tabs > li.active > a:hover
  {
     color: white !important;
     background-color: green !important;
  }

  .nav-tabs > li.disabled > a,
  .nav-tabs > li.disabled > a:hover
  {
     color: white !important;
     background-color: lightgray !important;
  }

  /*
     ----------------------------------
     Popovers for Armory Display
     ----------------------------------
  */

  /* override Bootstrap settings */
  .popover
  {
     max-width: 75% !important;
     font-size: 19px !important;
  }

  .arms_image_outer /* This is the outer div ... */
  {
     float: right;
     width: 185px;
     /*border: solid 1px #ccc;*/
     margin: 5px;
     /*border-radius: 5px;*/
     text-align: center;
     /*overflow-y: auto;*/
  }

  .arms_image_thumbnail
  {
  /*   border: solid 1px #ccc;
     border-radius: 2px;*/
     background: white;
     margin-top: 5px;
     margin-bottom: 5px;
     max-width: 175px;
     max-height: 250px;
  }

  .arms_image_big
  {
     max-width: 600px;
     max-height: 800px;
     position: relative;
     margin-bottom: 5px;
     margin-top: 5px;
  }

  /* award images */

  .award_image_outer /* for thumbnail */
  {
     float: right;
     max-width: 250px;
     max-height: 180px;
  /*   border: solid 1px #ccc;*/
     margin: 5px;
     margin-left: 7px;
     padding: 5px;
     padding-left: 7px;
     padding-right: 7px;
  /*   border-radius: 5px;*/
     text-align: center;
  /*   overflow-y: auto;*/
  }

  .award_image_thumbnail
  {
     border: solid 1px #ccc;
     border-radius: 2px;
     background: white;
     margin-top: 5px;
     max-width: 250px;
     max-height: 225px;
  }

  .award_image_big
  {
     max-width: 600px;
     max-height: 800px;
     position: relative;
     margin-bottom: 7px;
     padding-bottom: 7px;
     margin-top: 7px;
  }

  /*
     scroll-to-top button, from:
     https://codepen.io/desirecode/pen/MJPJqV
  */
  #scroll
  {
     position:fixed;
     right:10px;
     bottom:10px;
     cursor:pointer;
     width:50px;
     height:50px;
     background-color: green;
     text-indent:-9999px;
     display:none;
     -webkit-border-radius:60px;
     -moz-border-radius:60px;
     border-radius:60px;
  }
  #scroll span
  {
     position:absolute;
     top:50%;
     left:50%;
     margin-left:-8px;
     margin-top:-12px;
     height:0;
     width:0;
     border:8px solid transparent;
     border-bottom-color:#ffffff;
  }
  #scroll:hover
  {
     background-color:#e74c3c;
     opacity:1;filter:"alpha(opacity=100)";
     -ms-filter:"alpha(opacity=100)";
  }
  /* end of scroll-to-top button */

我拿出了媒体查询，因为这太长了......

1 个答案:

答案 0 :(得分：0)

在我的浏览器的检查员中花了一些时间之后，我发现我可以覆盖高度的设置，以便在我自己的CSS文件中可能发生的任何事情可能导致这种情况（我仍然无法做到）找到那个，我可以改变TinyMCE中代码编辑器使用的textarea的高度：

/* TinyMCE Code Editor textarea control */
#mceu_32
{
   height: 449px !important;
}
相关问题
最新问题