Consider implementing support for hiding the toolbar in the HTML editor until the control gains focus. A quick and dirty approach could be using CSS:
/* Hide toolbar when control does not have focus */
div.FitUiControlInput[data-focused="false"] span.cke_top
{
display: none;
}
/* Make content area assume full height when control does not have focus */
div.FitUiControlInput[data-focused="false"] div.cke,
div.FitUiControlInput[data-focused="false"] div.cke_inner,
div.FitUiControlInput[data-focused="false"] div.cke_contents
{
height: 100% !important;
}
The example above does not work properly with the Maximize button though so it need improvements. Maximizing the control results in control changing height when focused/unfocused. Also, the outer height of the control varies a few pixels when focused/unfocused which is annoying.
An alternative approach, and certainly much more performant, is to completely avoid loading the HTML editor until focused.
Consider implementing support for hiding the toolbar in the HTML editor until the control gains focus. A quick and dirty approach could be using CSS:
The example above does not work properly with the Maximize button though so it need improvements. Maximizing the control results in control changing height when focused/unfocused. Also, the outer height of the control varies a few pixels when focused/unfocused which is annoying.
An alternative approach, and certainly much more performant, is to completely avoid loading the HTML editor until focused.