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>".

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 = "";
    }
}

---

ADMIN EDIT

A workaround is to initialize the RemoveAttributes list:

<TelerikEditor @bind-Value="@EditorContent">
    <EditorSettings>
        <EditorPasteSettings 
                             RemoveAttributes="@( new List<string>() )"
                            >
        </EditorPasteSettings>
    </EditorSettings>
</TelerikEditor>

@EditorContent

@code{
    string EditorContent { get; set; }
}

---

I'm trying to use the Blazor editor but the "Insert Image" function is very basic. Previously using Webforms & Core the insert image in the editor presented the user with a file management and image upload popup. Is this functionality available with the Blazor component?

=====ADMIN EDIT=====

Possible alternative:

1. Utilize a custom Editor's tool that opens a Window or Dialog containing a FileManager.
2. Use the FileManager's SelectedItemsChanged event to determine which image the user wants to insert into the Editor.
3. Programmatically execute the Editor's insertImage command.

In fashion similar to the following example for the React editor that's done through the onMount ReactJS-specific event: https://www.telerik.com/kendo-react-ui/components/editor/plugins/#popup-tools

More on plugins for ProseMirror: https://prosemirror.net/docs/ref/version/0.20.0.html#state.Plugin_System

For example, like the AJAX editor where the field appears only when simple text is selected, but when complex content is selected (e.g., other html tags like <strong>, <p>, <img>) the field is not available.

*** Thread created by admin on customer behalf ***

Like other editors from Telerik (say, Kendo, WebForms).

*** Thread created by admin on customer behalf ***

An event that we can hook into so that we can take the (presumably) base64 encoded image (link), upload it somewhere, and then replace it with an image element set to the uploaded imaged file. Ideally, that would work for other content too.

*** Thread created by admin on customer behalf ***