Please review your demo at https://demos.telerik.com/blazor-ui/editor/overview in Safari on MacOS and you'll see that the HTML Editor's height is not showing correctly.

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.

It looks like the Iframes now work, but a Video tag with Source tags does not, like the following:

<video class='embed-responsive embed-responsive h-100' controls='controls'>

<source src= '/File/101' type='video/webm' />

<source src='/File/108' type='video/mp4' />

</video>

The View HTML Button will remove the whole video tag. And the 'insertHtml' will throw an Error on the JS Console.

These Tags are necessary because different browsers and OSs may not be able to display certain media types. So usually you provide multiple sources for the different requirements. Is there a way to allow these Tags in the 'insertHtml' Method?

Previously if content in HTML view of Editor exceeded height a scroll bar would appear like below (v2.29).

Now there is no scroll bar and you have to press the down arrow to get further in the content (v.3.0.1) .

to fix this locally I added CSS overflow: auto to .k-textarea

I need help to format/pretty HTML code in the viewhtml dialog box in the Editor. Plus, I couldn't find any property on the ViewHtml class that allows setting the content when the dialog box is open.

See Blazor ViewHtml dialog formatting.

See Kendo ViewHtml dialog formatting.

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

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

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

Drag to resize and move images in the editor

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

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

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

Try running an editor with content like this:

<p>Para 1</p><p><br></p><p>Para 2</p><p><br></p><p>Para 3</p>

Now, open the ViewHtml button from the full toolset and Update the content without modifying anything.

The result is that there are more <br> tags in the the empty paragraphs than what we started with, and they are added every time you repeat this process.

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

Clicking the image, and selecting the image button brings up a popup. The "Update" button is not appearing properly (does not occur on other editor popups):

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

At the moment, commands are available both for color and background color, you can find them in the built-in tools list article - see the Back Color and Fore Color tools: https://docs.telerik.com/blazor-ui/components/editor/built-in-tools. You can use them as custom tools right now: https://docs.telerik.com/blazor-ui/components/editor/custom-tool - basic examples are also available in the demo: https://demos.telerik.com/blazor-ui/editor/custom-tools.

I would like to have them as built-in tools with predefined color pickers.

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