Hi!

When using the Telerik Editor for Blazor, especially the insert HTML function, something seems a little odd.

I reproduced the same behaviour of my application in your demos on your website.

It seems like it is currently not possible to insert a HTML with multiple Lines in it, it only inserts the first line within the given value.

For better understanding, I've attached a video which displays the behaviour.

The HTML i've used:

<p>Test</p><p><br /></p><p>with</p><p><br /></p><p>Line</p><p><br /></p><p>breaks</p><p><br /></p><p><br /></p><p>1</p><p><br /></p><p>2</p><p><br /></p><p>3</p><p><br /></p>

Especially when you are working with HTML-Templates, it is necessary to be able to insert a rich HTML Template with multiple lines, tables, etc..

Thank you for your help in advance!

Best regards,

Stefan

I do have a default word content available for the user, and the user will be able to change the content if required. 

The track change feature would allow reviewers to quickly zoom into the edited wording (i.e. highlighted in red) for them to review quickly.

---

ADMIN EDIT

If such a feature were to be implemented as part of the component feature set, it is likely to show diff via CSS and HTML elements and would not likely compare against a Word (or any other) document.

For the time being, you can consider a custom button that will do an HTML diff against the original content that was provided to it to show it in the editor, but reconciling any changes will be a more complex task that is very far from trivial to implement.

When the Editor is disabled, the user can still focus it by tabbing and edit the content. The issue occurs in both Div and Iframe EditMode.

Click on the textbox and press TAB:

<input type="text" tabindex="0" />

<TelerikEditor Enabled="false"
			  EditMode="@EditorEditMode.Div"
			  Height="200px" />

Currently, the Insert Image Dialog for the editor labels doesn't look great. the first two seem right-aligned and the second two items seem left-aligned. this screenshot is from the demo site.

Please expose the ability to allow additional HTML attributes in the Editor content.

===ADMIN EDIT===

Provide support for:

• custom attributes for the Editor elements
• custom tags

I would like to be able to customize the content of the Iframe in the Editor with CSS.

===

Telerik edit:

In the meantime, it is possible to inject CSS styles in the Editor <iframe> with JavaScript:

@inject IJSRuntime js

<TelerikEditor @bind-Value="@EditorValue" />

@* Move scripts to separate js files in production. *@
<script suppress-error="BL9992">
    function injectEditorStyleTag() {
        var doc = document.querySelector("iframe").contentWindow.document;
        var head = doc.querySelector("head");
        
        var style = doc.createElement("style");
        style.type = "text/css";
        
        var css = "body { background: #fed; font-size: 24px; }";
        
        style.appendChild(doc.createTextNode(css));
        head.appendChild(style);
    }
</script>

@code {
    private string EditorValue { get; set; } = "<p>The default font-size is 24px.</p>";

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await js.InvokeVoidAsync("injectEditorStyleTag");
        }
    }
}

Currently, on small devices the Editor tools are wrapped on multiple lines. I'd like to have the tools displayed in a separate menu when they do not fit on a single row.

For example:

I bind the TelerikEditor Value to a property that is reloaded with different unrelated content. The editor keeps the Undo/Redo stack so for the "second" content I can Undo back to the "first" content. I'd like to be able to clear the Undo stack.

Steps to reproduce:

https://demos.telerik.com/blazor-ui/editor/overview

1. Clean content
2. Insert sentence
3. Center it and press Enter
4. Type new sentence and select whole content (Ctrl + A)
5. Align not possible, because is selected

Expected: All paragraphs in the editors receive center alignment

Actual: Align is possible

A functionality similar to "TelerikUpload" (i.e. browse/select image file) would be useful when trying to insert an image

Drag to resize and move images in the editor

Similar to https://demos.telerik.com/kendo-ui/editor/index

When you create or paste a table, you cannot move the cursor outside of it if there is no other content in the Editor.

----------ADMIN EDIT----------

Here is a possible workaround when using InsertTable() tool:

@using Telerik.Blazor.Components.Editor

<TelerikButton OnClick="@InsertTable">Insert Table</TelerikButton>

<TelerikEditor @ref="@TheEditor" Value="@TheContent" ValueChanged="@ValueChangedHandler"></TelerikEditor>

@code {
    TelerikEditor TheEditor { get; set; }

    string TheContent { get; set; } = "<p>Lorem ipsum.</p><p>Dolor sit amet.</p>";

    void ValueChangedHandler(string value)
    {
        var checkEnd = value.EndsWith("</table>");

        TheContent = checkEnd == true ? value + "<p></p>" : value;
    }

    async Task InsertTable()
    {
        await TheEditor.ExecuteAsync(new TableCommandArgs(4, 4));
    }
}

Steps:

• Use the Editor's ValueChanged event.
• See if the value ends with a closing </table> tag.
• Append an empty paragraph to the Editor value - "<p></p>".

When you paste a table in the Editor or insert one through the InsertHTML tool, most of the Editor Table tools don't work on the pasted table. Only Delete Table tool can be used. The rest of the Table tools do not seem to invoke any action with the table.

If you create table using the Create Table tool this behavior is not present, you can accordingly apply the built-in Table tools.

When you paste a table in the Editor or insert one through the InsertHTML tool, the Editor adds two  <tbody> tags making this invalid HTML.

If you include a table in the initially rendered content (not pasting it afterwards), two <tbody> tags appear as well.

If you create table using the Create Table tool this behavior is not present, only one <tbody> tag is added as expected.

• Wizard for inserting new tables
• Drag to resize tables and columns

Similar to https://demos.telerik.com/kendo-ui/editor/index

I am using the InsertHTML command to insert some HTML content. However, it looks like it inserts only the first element from the value I am providing.

==========

ADMIN EDIT

==========

Workaround:  you can wrap the HTML content you want to insert in a container, so the InsertHTML command reads it as one element. The following sample demonstrates how to achieve that.

@using Telerik.Blazor.Components.Editor

<TelerikButton OnClick="@( () => WindowIsVisible = !WindowIsVisible )">Insert Html</TelerikButton>

<TelerikEditor @ref="@TheEditor" @bind-Value="@TheContent"></TelerikEditor>

<TelerikWindow @bind-Visible="@WindowIsVisible">
    <WindowTitle>
        <strong>Insert Html</strong>
    </WindowTitle>
    <WindowContent>
        <TelerikTextArea @bind-Value="@HtmlToInsert"></TelerikTextArea>
        <TelerikButton OnClick="@InsertHtml">Insert</TelerikButton>
    </WindowContent>
</TelerikWindow>

@code{

    public string HtmlToInsert { get; set; }

    bool WindowIsVisible { get; set; }

    TelerikEditor TheEditor { get; set; }

    string TheContent { get; set; } = "<p>Lorem ipsum.</p><p>Dolor sit amet.</p>";

    async Task InsertHtml()
    {
        await TheEditor.ExecuteAsync(new HtmlCommandArgs("insertHtml", $"<div>{HtmlToInsert}</div>"));

        WindowIsVisible = !WindowIsVisible;

        HtmlToInsert = "";
    }
}