Editor TagHelper Overview

The Telerik UI Editor TagHelper for ASP.NET Core is a server-side wrapper for the Kendo UI Editor widget.

The Editor allows you to create rich textual content through a What-You-See-Is-What-You-Get (WYSIWYG) interface and generate widget value as an XHTML markup.

• Demo page for the Editor

Initializing the Editor

The following example demonstrates how to define the Editor by using the Editor TagHelper.

    <kendo-editor name="editor">
    </kendo-editor>

Basic Configuration

The tools collection of the Editor TagHelper is passed through the nest <tools> tag.

        <kendo-editor name="editor">
            <tools>
        <tool name="bold" />
        <tool name="italic" />
                <tool name="underline" />
        <tool name="fontName" />
            </tools>
        </kendo-editor>

        @(Html.Kendo().Editor()
                .Name("editor")
                .Tools(tools => tools
                        .Clear()
                        .Bold()
                        .Italic()
                        .Underline()
                        .FontName()
                )
        )

You can adjust and set up the tools in the tools collection through the <tools> tag. To define their items collection, use the <tool-items> and <tool-item> tags.

    <kendo-editor name="editor">
        <tools>
            <tool name="fontName">
                <tool-items>
                    <tool-item text="Default site font" value="Arial,Verdana,sans-serif" />
                    <tool-item text="Monospaced font" value="monospace" />
                </tool-items>
            </tool>
        </tools>
    </kendo-editor>

    @(Html.Kendo().Editor()
            .Name("editor")
            .Tools(tools => {
                    tools.Clear();
                    tools.FontName(items => items
                            .Add("Default site font", "Arial, Verdana, sans - serif")
                            .Add("Monospaced", "monospace")
                    );
            })
    )

To specify a chunk of content in the Editor TagHelper, use the <content> tag or the value attribute.

    <kendo-editor name="editor">
            <content>
                    <p>Some content.</p>
            </content>
    </kendo-editor>

    @(Html.Kendo().Editor()
            .Name("editor")
            .Value(@<text>
                <p>Some content.</p>
            </text>)
    )

The ImageBrowser and FileBrowser dialogs are configured through the <image-browser> and <file-browser> tags.

    <kendo-editor name="editor">
    <image-browser file-types="*.png,*.gif,*.jpg,*.jpeg">
        <transport upload-url="/ImageBrowser/Upload" image-url="/shared/UserFiles/Images/{0}">
            <create url="/ImageBrowser/Create"/>
            <read url="/ImageBrowser/Read" />
            <destroy url="/ImageBrowser/Destroy" />
        </transport>
    </image-browser>
    <file-browser>
        <transport upload-url="/FileBrowser/Upload" file-url="/shared/UserFiles/Images/{0}">
            <create url="/FileBrowser/Create" />
            <read url="/FileBrowser/Read" />
            <destroy url="/FileBrowser/Destroy" />
        </transport>
    </file-browser>
    </kendo-editor>

    @(Html.Kendo().Editor()
        .Name("editor")
        .ImageBrowser(imageBrowser => imageBrowser
                .Image("~/shared/UserFiles/Images/{0}")
                .Read("Read", "ImageBrowser")
                .Create("Create", "ImageBrowser")
                .Destroy("Destroy", "ImageBrowser")
                .Upload("Upload", "ImageBrowser")
        )
        .FileBrowser(fileBrowser => fileBrowser
                .File("~/shared/UserFiles/Images/{0}")
                .Read("Read", "FileBrowser")
                .Create("Create", "FileBrowser")
                .Destroy("Destroy", "FileBrowser")
                .Upload("Upload", "FileBrowser")
        )
    )

The serialization, deserialization and paste-cleanup settings are configured with the <serialization>, <deserialization>, and <paste-cleanup> tags respectively.

    <kendo-editor name="editor">
    <deserialization custom="myDeserialization" />
    <serialization custom="mySerialization" entities="false" />
        <paste-cleanup custom="myPasteCleanup" keep-new-lines="true" />
    </kendo-editor>

    @(Html.Kendo().Editor()
        .Name("editor")
    .Deserialization(deserialization => deserialization.Custom("myDeserialization"))
    .Serialization(serialization => serialization.Custom("mySerialization").Entities(false))
        .PasteCleanup(pasteCleanup => pasteCleanup.Custom("myPasteCleanup").KeepNewLines(true))
    )

To configure other Editor options, such as PDF export, immutables, rezisability or messages, use the respective inner tags—<pdf>, <immutables>, <resizable>, or <messages>.

    <kendo-editor name="editor">
    <immutables enabled="true" />
    <resizable toolbar="true" content="true" />
    <pdf paper-size="A4" />
    <messages bold="Strong" />
    </kendo-editor>

    @(Html.Kendo().Editor()
        .Name("editor")
        .Immutables(true)
    .Resizable(resizable => resizable.Toolbar(true).Content(true))
    .Pdf(pdf => pdf.PaperSize("A4"))
    .Messages(messages => messages.Bold("Strong"))
    )

See Also

• Basic Usage of the Editor TagHelper for ASP.NET Core (Demo)
• Server-Side API