外观
设置大小
在2012年第三季度(2012.3.1114)发布之前,编辑器假设的像素偏移宽度textarea > <
它是从那里被创造出来的。
组件的当前行为暴露了以下细节:
- 控件中的内联样式设置宽度或高度值
textarea > <
元素,则编辑器应用它。 - 如果
textarea > <
没有显示这样的显式值,编辑器应用100%的宽度尺寸和默认的高度250px。
如果textarea > <
宽度和高度通过外部CSS样式应用,使用与编辑器类似的方法-例如,通过使用其k-editor
CSS类。
的textarea > <
,关口
,行
属性是必需的。它们可以影响a的维数textarea > <
元素。但是,浏览器不会以一致的方式应用它们,并且在呈现其大小时Editor会忽略它们。
当您使用经典的(iframe) Editor模式时,组件不会假设高度很小,因为它需要为其工具栏和可编辑区域提供最小的合理空间。默认组件高度为250px。要设置高度小于100px,使用内联编辑器模式。当您使用Editor MVC帮助器时,通过应用CSS类.HtmlAttributes ()
。
下面的例子演示了如何设置小于200px的高度。
<时尚>表。小编辑器{高度:100px;}表。小编iframe。K-content{高度:50px;/*小于编辑器高度50px */} 经典编辑器的最小可能高度为100px:
内联编辑器的最小合理高度为2em:
编辑器内容
使用默认样式
当经典编辑模式,则编辑器使用iframe
并对其内容应用一些默认的CSS样式。这种行为覆盖了默认的浏览器样式,该样式在下面的示例中演示,主要针对标题、段落、链接、列表和表格。编辑器中的所有表都获得一个k-table
类,该类不包含在组件的值中。
Html, body {padding: 0;保证金:0;高度:100%;最小高度:100%;} body {font-size: 12px;无衬线字体类型:Verdana,日内瓦;margin-top: 1 px;填充:1px . 20 em 0;自动换行:break-word;} h1 {font-size: 2em; margin: .67em 0; } h2 { font-size: 1.5em; } h3 { font-size: 1.16em; } h4 { font-size: 1em; } h5 { font-size: .83em; } h6 { font-size: .7em; } p { margin: 0 0 1em; } ul, ol { padding-left: 2.5em; } a { color: #00a; } code { font-size: 1.23em; } .k-table { table-layout: fixed; width: 100%; border-spacing: 0; margin: 0 0 1em; } .k-table td { min-width: 1px; padding: .2em .3em; } .k-table, .k-table td { outline: 0; border: 1px dotted #ccc; } .k-table p { margin: 0; padding: 0; }
要避免前面示例所演示的默认内容样式,请在Editor初始化后通过执行以下代码删除或覆盖它们。
var editor = $("#EditorID").data("kendoEditor");var styleTag = editor.body.parentNode.getElementsByTagName("style")[0];styleTag.parentNode.removeChild (styleTag);
设置自定义样式
也可以使用自定义样式高特异性选择器,并将这些自定义样式注入编辑样式表。在这种情况下,您不必自定义编辑器的格式化工具。