The problem is that the ValueChanged fires without an actual change in the Editor content - just click in it. I reproduce this issue in the following scenario:
Reproduction: https://blazorrepl.telerik.com/wfaxnvPv19jUCGhd15.
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:
I'm using the Editor in a form along with several other inputs (e.g. TextBox, NumericTextBox).
If the user enters an invalid value for the other inputs, they get a red border. The Editor, however, does not have such a border when its value is invalid and thus the form elements are not consistent. Please add a red border for the invalid state of the Editor, too.
===
ADMIN EDIT
===
At this stage, the Editor is not treated as a standard input and it does not support all of the input's capabilities - such as invalid state, disabled state, sizing, fill and more.
The current request may potentially be part of a bigger design story that strives to align the Editor's functionalities with the rest of the inputs ( TextBox, NumericTextBox and more).
The content area of the Editor currently has a "k-invalid" class when the value is not valid. As a workaround for the time being, you may add a red border with CSS: https://blazorrepl.telerik.com/mSvmFglg25NXJw7K05.Hello,
the Color Tool Customization in the Telerik Editor is not working correctly. Colors are only generate HTML in Rgb.
The documentation says: "ValueFormat": The format, which the Color tool will set in the generated HTML markup. Use Rgb
or Hex
.
Thanks in advance.
For example: https://docs.telerik.com/blazor-ui/components/editor/built-in-tools#color-tool-customization
@using Telerik.Blazor.Components.Editor
<TelerikEditor Tools="@EditorTools"
@bind-Value="@EditorValue">
</TelerikEditor>
@code {
private string EditorValue { get; set; }
private List<IEditorTool> EditorTools { get; set; } = new List<IEditorTool>()
{
new ForeColor()
{
Title = "Text Color",
Colors = new List<string> { "#f00", "#ff9900", "rgb(0, 128, 0)", "rgba(0, 0, 255, .8)" },
ValueFormat = ColorFormat.Hex
},
new ViewHtml()
};
}
The Font Size and Font Family tools display the currently applied style value in the user selection only if the selection is inside one HTML element. This prevents the user from resetting (removing) the current font style.
Test scenario:
@using Telerik.Blazor.Components.Editor
<TelerikEditor @bind-Value="@EditorValue"
Tools="@EditorToolSets.All" />
<h2>Raw Editor Value</h2>
<TelerikTextArea @bind-Value="@EditorValue"
Rows="5" />
@code {
private string EditorValue { get; set; } = @"<p><strong>Foo</strong> foo foo.</p><p>Bar <strong>bar</strong> bar.</p><p>Baz baz <strong>baz</strong>.</p>";
}
The possible workarounds are:
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
Please allow the user to copy an image from the file system (for example, Windows Explorer) and paste it in the Editor without opening the image first.
Currently this works in the Kendo UI jQuery Editor.
The Telerik Blazor Telerik Editor Insert Hyperlink functionality is not consistent with other Telerik Editor components and non Telerik Editors. Usually when dealing with Editors and the Insert Hyperlink feature, you can insert a hyperlink without need to select and convert existing text. You can also usually use the ctrl+k keyboard shortcut instead of clicking on the button. This does not work in the Telerik Blazor Editor.
The differences and lack of functionality has been raised as an issue by end users.
Expected Behaviour
This can be reproduced on any of the Kendo UI for jQuery demo pages. It can also be reproduced within the editor on this very form.
Actual Behaviour
This can be reproduced on any of the demo pages that has the hyperlink button.
The Editor is not showing its Value in the following scenario:
Possible workarounds are:
I am using the LinkCommandArgs to programmatically create a link. I am adding all the required parameters (string href, string text, string target, string title) but no link is added to the Editor content.
Reproduction: https://blazorrepl.telerik.com/QyOTwCuU48HSG5xp41.
===
ADMIN EDIT
===
For the time being, you may add a link using the HtmlCommandArgs tool and the "insertHtml" command like so: https://blazorrepl.telerik.com/GyuTmMkt56f3YiM754.
The Editor currently supports only numeric ordered list. I'm looking for an option to add different types of ordered lists - roman and alphabetical.
Please add support for these types of ordered lists similiar to the KendoReact Editor.
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
I would like to use the Editor in a more compact matter in my application. The buttons and button groups must be small, and the margins and the paddings must be smaller as well.
The overall goal is to make the Editor take less amount of space in the UI.
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 ***
Description :
When you click before the content in the Editor, the cursor should show up before the text. But, if a text was added programmatically, the cursor shows up after the added text instead.
To reproduce the problem :
1. Open this REPL example: https://blazorrepl.telerik.com/cdYpPabd37jvK9jt23
2. Click the "Insert Inline Text" button.
3. Try to place the cursor in front of the editor content.