RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://docs.telerik.com/aspnet-mvc/html-helpers/editors/editor/styling below:

ASP.NET MVC Editors Editor Styling of Content

New to Telerik UI for ASP.NET MVC? Start a free 30-day trial Styling of Content

The Editor component provides default and custom options for styling its content.

For a runnable example, refer to the demo on styles in the Editor.

When the classic mode is enabled, the Editor uses an iframe and applies some default CSS styles to its content. This behavior overrides the default browser styling.

The following example targets mainly headings, paragraphs, links, lists, and tables. All tables inside the Editor obtain a k-table class which is not included in the value of the widget.

html,
body {
    padding: 0;
    margin: 0;
    height: 100%;
    min-height: 100%;
}

body {
    font-size: 12px;
    font-family: Verdana,Geneva,sans-serif;
    margin-top: -1px;
    padding: 1px .2em 0;
    word-wrap: 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;
}

To avoid the default content styles from the previous example, remove or override them after the Editor is initialized by executing the following code.

    @(Html.Kendo().Editor()
        .Name("editor")
        .Value(@<text>
            <p>
                The Editor allows your users to edit HTML in a familiar, user-friendly way.
            </p>
        </text>)
    )

    <script type="text/javascript">
        $(document).ready(function() {
            var editor = $("#editor").data("kendoEditor");
            var styleTag = editor.body.parentNode.getElementsByTagName("style")[0];
            styleTag.parentNode.removeChild(styleTag);
        });
    </script>

Custom Styles

You can also use custom styles with higher specificity selectors and inject those custom styles in an Editor stylesheet. In such cases, you do not have to customize the Formatting tool of the Editor.