When I add table to Editor, dispose the component and initialize it again with the same content, the table cells appear taller. It looks like an additional <br class="ProseMirror-trailingBreak"> appears in every cell.
Reproduction: https://blazorrepl.telerik.com/cwaqcSuV12myl9ok47.
Steps to reproduce:
- Add a table
- Toggle the Editor
- Cells appear taller
I cannot clear the content area of the TelerikEditor when the component is placed in the Form Item Template.
<AdminEdit>
Below, you can find a workaround solution:
@using System.ComponentModel.DataAnnotations;
@using Telerik.Blazor.Components.Editor
<TelerikForm Model="@Model" OnSubmit="@OnSubmitHandler">
<FormValidation>
<DataAnnotationsValidator />
<ValidationSummary />
</FormValidation>
<FormItems>
<FormItem>
<Template>
<TelerikEditor @bind-Value="@Model.Name" @ref="@EditorRef" />
</Template>
</FormItem>
</FormItems>
</TelerikForm>
@code {
public SampleData Model { get; set; } = new SampleData();
public TelerikEditor EditorRef { get; set; }
private async Task OnSubmitHandler(EditContext editContext)
{
bool isFormValid = editContext.Validate();
if (isFormValid)
{
//some logic here
}
else
{
await EditorRef.ExecuteAsync(new HtmlCommandArgs("setHtml", "")); //workaround
//clear the content of the editor to let the user type anew
Model.Name = String.Empty;
}
}
public class SampleData
{
[Required]
[MinLength(30, ErrorMessage = "The content should be minimum 30 characters long.")]
public string Name { get; set; }
}
}</AdminEdit>
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.
Hello,
We've come across a bug. It seems as whatever tool button(s) that should be selected is not shown correctly. It appears to show the previously selected.
Repro steps:
- Write two different formatted texts on separate lines in your Editor component.
- Move the cursor to the first line
- Move the cursor to the second line that has a different formatted text. Note that the tool button for the formatted text on the first line is shown as selected.
This should happen:
Is this an intended behaviour? Our users are confused :)
/Patrik
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 = "";
}
}
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 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" />
Hello,
after selecting a block of text in your editor and perform some block operation (for instance - change font size, name, ..) the original selection is lost. Would it be possible to keep that selection please?
Very thanks.
Miroslav
Highlight an existing hyperlink and click the Insert Hyperlink button. The update button is empty
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.
I upgraded my Blazor UI package to 3.3.0 to try and get rid of the multiple tbody issue with adding a table. Now there is an even weirder problem. Adding a table with two columns via setting the Editor's value in the code block is causing several table cells to get inserted in between and around the desired ones.
This is my long html string:
<div style="padding:20px;text-align:center;">
<table style="width:100%;"><tbody>
<tr>
<td colspan="2">
<p style= "text-align:center; font-size: medium; color: #3E579A; background-color: #dbebfa;">
<strong>TAX YEAR 2019</strong>
</p>
</td>
</tr>
<tr>
<td colspan="1"><p style="text-align: right"><strong>AMOUNT DUE</strong></p></td>
<td colspan="1"><p style="text-align: left">$562.35</p></td>
</tr>
<tr>
<td colspan="1"><p style="text-align: right"><strong>5% PENALTY</strong></p></td>
<td colspan="1"><p style="text-align: left">¤28.12</p></td>
</tr>
<tr>
<td colspan="1"><p style="text-align: right"><strong>INTEREST DUE</strong></p></td>
<td colspan="1"><p style="text-align: left">¤129.34</p></td>
</tr>
<tr>
<td colspan="1">
<p style="text-align: right"><strong>LATE FEE</strong></p>
</td>
<td colspan="1">
<p style="text-align: left">$105.00</p>
</td>
</tr>
<tr>
<td colspan="1">
<p style="text-align: right;color: #3E579A;"><strong>TOTAL</strong></p>
</td>
<td colspan="1">
<p style="text-align: left;color: #3E579A;">¤824.81</p>
</td>
</tr>
<tr style="border:none;">
<td style="border:none;">
</td>
</tr>
<tr>
<td colspan="2">
<p style= "text-align:center; font-size: medium; color: #3E579A; background-color: #dbebfa;">
<strong>TAX YEAR 2020</strong>
</p>
</td>
</tr>
<tr>
<td colspan="1" style="width:50%;">
<p style="text-align: right"><strong>AMOUNT DUE</strong></p>
</td>
<td colspan="1" style="width:50%;">
<p style="text-align: left">¤323.34</p>
</td>
</tr>
<tr>
<td colspan="1">
<p style="text-align: right"><strong>INTEREST DUE</strong></p>
</td>
<td colspan="1">
<p style="text-align: left">¤61.43</p>
</td>
</tr>
<tr>
<td colspan="1">
<p style="text-align: right;color: #3E579A;"><strong>TOTAL</strong></p>
</td>
<td colspan="1">
<p style="text-align: left;color: #3E579A;">¤384.77</p>
</td>
</tr>
<tr style="border:none;">
<td style="border:none;">
</td>
</tr>
<tr>
<td colspan="2">
<p style= "text-align:center; font-size: medium; color: #3E579A; background-color: #dbebfa;">
<strong>TAX YEAR 2021</strong>
</p>
</td>
</tr>
<tr>
<td colspan="1" style="width:50%;">
<p style="text-align: right"><strong>AMOUNT DUE</strong></p>
</td>
<td colspan="1" style="width:50%;">
<p style="text-align: left">¤323.47</p>
</td>
</tr>
<tr>
<td colspan="1">
<p style="text-align: right"><strong>INTEREST DUE</strong></p>
</td>
<td colspan="1">
<p style="text-align: left">¤19.41</p>
</td>
</tr>
<tr>
<td colspan="1">
<p style="text-align: right;color: #3E579A;"><strong>TOTAL</strong></p>
</td>
<td colspan="1">
<p style="text-align: left;color: #3E579A;">¤342.88</p>
</td>
</tr>
<tr style="border:none;">
<td style="border:none;">
</td>
</tr>
<tr>
<td colspan="1">
<p style="text-align: right;color: #3E579A;"><strong>TOTAL DUE</strong></p>
</td>
<td colspan="1">
<p style="text-align: left;color: #3E579A;">¤1,552.46</p>
</td>
</tr>
</tbody>
</table>
</div>
This is the result:
At this point I am having to downgrade to 3.2.0 in order for it to look anything near what I need it to.
Here is my modal with the Editor component.
<div class="modal fade" id="bill-modal" tabindex="-1" aria-labelledby="bill-modal-label" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog modal-xl modal-fullscreen-lg-down">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="redemption-bill-modal-label">Bill</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<TelerikEditor Id="TheEditor" @ref="@TheEditor" Value="@EditorContent" Tools="@Tools" EditMode="EditorEditMode.Iframe" Class="editor-iframe" Height="800px">
<EditorCustomTools>
<EditorCustomTool Name="MyCustomTools">
<div style="margin-right: 50px">
<TelerikButton OnClick="@Print" Icon="print" class="m-1"></TelerikButton>
<TelerikButton OnClick="@ExportToPdf" Icon="download" class="m-1"></TelerikButton>
<TelerikDropDownList Data="@SupportedExportFormats" @bind-Value="@ExportFormat" Width="auto" class="m-1"></TelerikDropDownList>
</div>
</EditorCustomTool>
</EditorCustomTools>
</TelerikEditor>
</div>
</div>
</div>
</div>I'm setting the Value via an exposed method that uses some complicated code to generate that html string above. I don't think it's necessary to have to strip out the proprietary data and paste that here, but please let me know if that would help resolve this issue.
Thanks.
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 ***
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.
If I click accidentally click on one of the alignment options, I cannot then unselect it.
===========
ADMIN EDIT
Video of the current behavior attached.
===========
---
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; }
}---
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.
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