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,

I tried looking through the docs and api reference for the Blazor Editor, but I can't seem to find any resizable property like the one found in the ASP.NET Core component here: ASP.NET Core Editor - Api Reference | Telerik UI for ASP.NET Core

I just wanted to check that this feature is not included in the editor for Blazor before I submitted a feature request. I tried to search the requests as well and I didn't see this request listed. 

If this feature does not exist, do you know if it is being currently considered for a future release or if there is a workaround?

Thank you,

Frank

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.

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

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

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

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

---

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

---

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

At the moment bullet lists are lost.

---

ADMIN EDIT

Short version: The editor must implement content filters that transform the HTML MS Word provides into actual HTML (e.g., bullets from Word come as paragraphs, not <ul>).

Long version:

By default, pasting content from an application to another application goes through the OS and the applications can choose what flavor of the content to provide. In the case of pasting to a browser, the browser informs MS Word to provide an HTML version of the content. What Word provides is often pretty bad HTML where a lot of the formatting is gone.

For example, bullet lists become paragraphs that have a span with a dot in it, but this is not a real bullet list.

You can compare that behavior between the Telerik editor and the naked behavior of the browser with markup like this:

<div contenteditable="true" style="min-height: 200px; border: 1px solid red;"></div>

<TelerikEditor></TelerikEditor>

An editor component will do some processing that tries to ensure valid HTML and so some content changes are inevitable. The key thing is that we preserve the main HTML structure that Word provides.

---