jQuery的剑道UI免费下载30天试用版

外观

编辑器提供以下选项设置大小使用默认样式,配置自定义样式

设置大小

在2012年第三季度(2012.3.1114)发布之前,编辑器假设的像素偏移宽度textarea > <它是从那里被创造出来的。

组件的当前行为暴露了以下细节:

  • 控件中的内联样式设置宽度或高度值textarea > <元素,则编辑器应用它。
  • 如果textarea > <没有显示这样的显式值,编辑器应用100%的宽度尺寸和默认的高度250px。

如果textarea > <宽度和高度通过外部CSS样式应用,使用与编辑器类似的方法-例如,通过使用其k-editorCSS类。

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

设置自定义样式

也可以使用自定义样式高特异性选择器,并将这些自定义样式注入编辑样式表。在这种情况下,您不必自定义编辑器的格式化工具。

另请参阅

在本文中
Baidu
map