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

If I click accidentally click on one of the alignment options, I cannot then unselect it.

===========

ADMIN EDIT

Video of the current behavior attached.

===========

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

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

Hi,

We are using the Blazor Editor for a feature in one of our web apps, and created a custom tool for the editor that allows the user to modify the raw HTML.

If an IFrame is added to the HTML with an empty or missing "src" attribute like so:

<iframe src=""></iframe>

OR

<iframe></iframe>

The editor will throw a JS Interop exception:

No value supplied for attribute src
      OP@https://[redacted]/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:6:830821
      PP.prototype.computeAttrs

Would you guys consider this a bug with the editor? Since they are technically valid elements, mganss' HtmlSanitizer does not remove sourceless IFrames and unfortunately there does not seem to be a way to make it do so.

Thanks in advance for the assistance!

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.

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?

If a user creates an unordered list and then decides to switch to an ordered list, they can do it simply by clicking on the "Insert Ordered List" button and vice versa.

However, if the list another list nested within it, the action either does not work or exhibits weird behavior. Please have a look at the attached example project containing the editor and a sample nested list string.

1. Placing your cursor within the outer ordered list highlights the "Insert Ordered List" button. Clicking on the "Insert Unordered List" button will either fail, create a weird intermediate level only for the item currently containing the cursor, or only change the item currently under the cursor.

2. Attempting to highlight the entire list will also highlight both the Insert List buttons. Clicking on Insert Ordered List will flatten the whole thing into paragraphs. Clicking on Insert Unordered List will mess up the list.

I expect the editor should more or less work similarly to the form in which I'm typing this message.

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.

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