I'm trying to use the Blazor editor but the "Insert Image" function is very basic. Previously using Webforms & Core the insert image in the editor presented the user with a file management and image upload popup. Is this functionality available with the Blazor component?
=====ADMIN EDIT=====
Possible alternative:
- Utilize a custom Editor's tool that opens a Window or Dialog containing a FileManager.
- Use the FileManager's SelectedItemsChanged event to determine which image the user wants to insert into the Editor.
- Programmatically execute the Editor's insertImage command.
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");
}
}
}
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
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 ***
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.
In fashion similar to the following example for the React editor that's done through the onMount ReactJS-specific event: https://www.telerik.com/kendo-react-ui/components/editor/plugins/#popup-tools
More on plugins for ProseMirror: https://prosemirror.net/docs/ref/version/0.20.0.html#state.Plugin_System
Currently, our Editor component does not support a placeholder parameter. Having a placeholder parameter, similar to the Kendo UI Editor, would prove to be beneficial.
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 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.
Hello,
Please allow standard form elements in the Editor content:
- <button> tags
- <input> tags (textboxes, checkboxes, buttons, radio buttons)
- <textarea> tags
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 = "";
}
}
I bind the TelerikEditor Value to a property that is reloaded with different unrelated content. The editor keeps the Undo/Redo stack so for the "second" content I can Undo back to the "first" content. I'd like to be able to clear the Undo stack.
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 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.
Please add built-in toolbar tools (buttons) for Cut, Copy and Paste.
The request from our customer is to have similar behavior as typical toolbars in most applications where there is a cut and paste along with the regular keyboard shortcuts.
As the toolbar options typically show the options that are available then one might presume that because cut and paste icons are not present then such a shortcut might not be available either.
Like other editors from Telerik (say, Kendo, WebForms).
*** Thread created by admin on customer behalf ***