Editor

The Editor enables users to create rich textual content through a What-You-See-Is-What-You-Get (WYSIWYG) interface.

Sass Variables

The Telerik and Kendo UI Editor enables you to configure and customize its appearance through the available Sass variables. Additionally, to configure and customize the appearance of its toolbar, use the Sass variables provided by the ToolBar Sass variables.

VariableDefault ValueComputed ValueValue
kendo-editor-border-width1px1pxDefault: 1pxComputed: 1px
Description: The width of the border around the Еditor.
kendo-editor-font-familyvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit)
Description: The font family of the Еditor.
kendo-editor-font-sizevar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)Default: var( --kendo-font-size, inherit )Computed: var(--kendo-font-size, inherit)
Description: The font size of the Еditor.
kendo-editor-line-heightvar( --kendo-line-height, normal )var(--kendo-line-height, normal)Default: var( --kendo-line-height, normal )Computed: var(--kendo-line-height, normal)
Description: The line height of the Еditor.
kendo-editor-placeholder-text$kendo-input-placeholder-textvar(--kendo-color-subtle, #666666)Default: $kendo-input-placeholder-textComputed: var(--kendo-color-subtle, #666666)
Description: The text color of the Еditor placeholder.
kendo-editor-placeholder-opacity$kendo-input-placeholder-opacity1Default: $kendo-input-placeholder-opacityComputed: 1
Description: The opacity of the Editor placeholder.
kendo-editor-selected-text$kendo-color-primary-contrastvar(--kendo-color-on-primary, #ffffff)Default: $kendo-color-primary-contrastComputed: var(--kendo-color-on-primary, #ffffff)
Description: The selected text color of the Editor.
kendo-editor-selected-bg$kendo-color-primaryvar(--kendo-color-primary, #ff6358)Default: $kendo-color-primaryComputed: var(--kendo-color-primary, #ff6358)
Description: The selected background color of the Editor.
kendo-editor-highlighted-bgif($kendo-enable-color-system, k-color( primary-subtle ), color.mix($kendo-color-primary, #ffffff, 20%))var(--kendo-color-primary-subtle, #ffeceb)Default: if($kendo-enable-color-system, k-color( primary-subtle ), color.mix($kendo-color-primary, #ffffff, 20%))Computed: var(--kendo-color-primary-subtle, #ffeceb)
Description: The highlighted background color of the Editor.
kendo-editor-export-tool-icon-margin-x.25em0.25emDefault: .25emComputed: 0.25em
Description: The horizontal margin of the Editor's export tool icon.
kendo-editor-resize-handle-size8px8pxDefault: 8pxComputed: 8px
Description: The size of the Editor's resize handle.
kendo-editor-resize-handle-border-width1px1pxDefault: 1pxComputed: 1px
Description: The border width of the Editor's resize handle.
kendo-editor-resize-handle-border #000000 #000000Default: #000000Computed: #000000
Description: The border color of the Editor's resize handle.
kendo-editor-resize-handle-bg #ffffff #ffffffDefault: #ffffffComputed: #ffffff
Description: The background color of the Editor's resize handle.
kendo-editor-selectednode-outline-width2px2pxDefault: 2pxComputed: 2px
Description: The outline width of the Editor's selected node.
kendo-editor-selectednode-outline-color #88ccff #88ccffDefault: #88ccffComputed: #88ccff
Description: The outline color of the Editor's selected node.
kendo-editor-inline-padding-xk-spacing(1)var(--kendo-spacing-1, 0.25rem)Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem)
Description: The horizontal padding of the inline Editor.
kendo-editor-inline-padding-yk-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)Default: k-spacing(0.5)Computed: var(--kendo-spacing-0\.5, 0.125rem)
Description: The vertical padding of the inline Editor.
kendo-editor-filebrowser-tiles-padding-xk-spacing(2)var(--kendo-spacing-2, 0.5rem)Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem)
Description: The horizontal padding of the Editor file browser tiles.
kendo-editor-filebrowser-tiles-padding-yk-spacing(1)var(--kendo-spacing-1, 0.25rem)Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem)
Description: The vertical padding of the Editor file browser tiles.
kendo-editor-content-paddingk-spacing(2)var(--kendo-spacing-2, 0.5rem)Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem)
Description: The padding of the Editor content.
Feedback