Hello, it is possible create custom tool which allow the user work with HTML code? Can you help me with idea?
Hi @Jan_Mucha,
Yes you can. Use the third demo from the custom tools example (the one with the custom dialog) and provide a TextBox with the HTML as source.
1 Like
Hello, I'm trying to make a custom tool to display the source, but I have a problem. I'm trying to insert a new html value but that is duplicated in the editor. When I select the whole content, everything is fine.Is it possible to replace the html value in the editor or is it possible to select the whole content programmatically?
My code:
@using InnOne.Vouchers.Data.Entities
@using System.Reflection
@using Radzen.Blazor.Rendering
@inject DialogService DialogService
<EditorButton Click=@ShowSource Icon="insert_photo" Title="ShowSource" />
@code {
[CascadingParameter]
public RadzenHtmlEditor Editor { get; set; }
async Task ShowSource()
{
await Editor.SaveSelectionAsync();
var result = await DialogService.OpenAsync<HtmlEditorSourceCodeDialog>("Source Code", new Dictionary<string, object>()
{
{"SourceCode", Editor.Value}
});
await Editor.RestoreSelectionAsync();
if (result != null)
{
await Editor.ExecuteCommandAsync(HtmlEditorCommands.InsertHtml, result);
}
}
}
Thanks for help
Try using 'selectAll' before insertHTML:
await Editor.ExecuteCommandAsync("selectAll");
1 Like
Hello, Ihave one issue with your solution. When I change something in editor and does not click out of editor the value does not contians latest changes. It si possible to call some command and get current value include latest changes?
<EditorButton Click=@ShowSource Icon="settings_ethernet" Title="Display Source Code" />
@code {
[CascadingParameter]
public RadzenHtmlEditor Editor { get; set; }
async Task ShowSource()
{
await Editor.SaveSelectionAsync();
//TODO when does not click outside editor there is old value without latest changes
var result = await DialogService.OpenAsync<HtmlEditorSourceCodeDialog>("Source Code", new Dictionary<string, object>()
{
{"SourceCode", Editor.Value}
}, new DialogOptions
{
Width = "90%",
Height = "90%"
});
await Editor.RestoreSelectionAsync();
if (result != null)
{
await Editor.ExecuteCommandAsync("selectAll");
await Editor.ExecuteCommandAsync(HtmlEditorCommands.InsertHtml, result);
}
}
}
I can't reproduce such a problem in our custom tools demo. The Change event is fired as expected.
Hello I update nuget all nuget packages to latest version, but I have same problem. Wen I change somethin in editor and then open the source code, there is original value. When i close modal window with soruce code and then open again, there is new value. Ofcourse when i click out of the editor and then open source code, there is new value.
You can see on animated gif hrer Error.gif | UloΕΎ.to
I created a minimal example that seems to work as expected (and it even doesn't use ExecuteCommand).
@inject DialogService DialogService
<RadzenHtmlEditor @bind-Value=@html style="height: 500px; margin-bottom: 1rem;" Execute=@OnExecute>
<RadzenHtmlEditorCustomTool CommandName="InsertHTML" Icon="code" Title="Insert HTML" />
</RadzenHtmlEditor>
Content:
<pre>
@html
</pre>
@code {
string html = "<strong>Hello</strong> world!";
async Task OnExecute(HtmlEditorExecuteEventArgs args)
{
await DialogService.OpenAsync("Insert HTML", ds =>
@<div>
<RadzenTextArea style="width: 100%; display: block" @bind-Value=@html></RadzenTextArea>
<RadzenButton Click="() => ds.Close()">Insert HTML</RadzenButton>
</div>);
}
}
Hello, maybe I don't explain my problem exactly. On your gif You started change value in source code. I have problem when i change value in editor and then click on display source code icon. I Use your example and there is the same problem as you can see on attached gif. Thank you very much for your help in solving this problem.
I see what you mean. The built-in custom tools is made in such a way to not blur the editor (and thus not lose the current caret position). This however has the side effect that you see. The solution is to use a custom tool defined with a template - which will blur the editor and thus update its Value property. Here is the updated example:
@inject DialogService DialogService
<RadzenHtmlEditor @bind-Value=@html style="height: 500px; margin-bottom: 1rem;" Execute=@OnExecute>
<RadzenHtmlEditorCustomTool>
<Template Context="editor">
<button class="rz-html-editor-button" @onclick=@OnExecute><RadzenIcon Icon="code"></RadzenIcon></button>
</Template>
</RadzenHtmlEditorCustomTool>
</RadzenHtmlEditor>
Content:
<pre>
@html
</pre>
@code {
string html = "<strong>Hello</strong> world!";
async Task OnExecute()
{
await DialogService.OpenAsync("Insert HTML", ds =>
@<div>
<RadzenTextArea style="width: 100%; display: block" @bind-Value=@html></RadzenTextArea>
<RadzenButton Click="() => ds.Close()">Insert HTML</RadzenButton>
</div>);
}
}
Hello, I try you example and it works perfect. But my source code editor is bit complicated. It is possible to implemented the RadzenHtmlEditorCustomTool when the tool is in different file? I try put my tool to RadzenHtmlEditorCustomTool template but it does not working.
<RadzenHtmlEditorCustomTool>
<Template Context="editor">
<InnOneHtmlEditorSourceCode />
</Template>
</RadzenHtmlEditorCustomTool>
If it works in a single file it should work in separate files as well 
Hello, i spend lots of time and try find the solution, but I didn't. I'm hopeless. When I used your example it worked correctly but in my case it does not work. I looked at soruce code on github but it does not helped me. Please can you help me?
<RadzenHtmlEditor @ref="editor" @bind-Value=@html style="height: 500px; margin-bottom: 1rem;" Execute=@OnExecute>
@*It Work*@
<RadzenHtmlEditorCustomTool>
<Template Context="editor">
<button class="rz-html-editor-button" @onclick=@OnExecute><RadzenIcon Icon="code"></RadzenIcon></button>
</Template>
</RadzenHtmlEditorCustomTool>
@*Does not work*@
<RadzenHtmlEditorCustomTool>
<Template Context="editor">
<InnOneHtmlEditorSourceCode />
</Template>
</RadzenHtmlEditorCustomTool>
</RadzenHtmlEditor>
My custom tool:
@using InnOne.Vouchers.Data.Entities
@using System.Reflection
@using Radzen.Blazor.Rendering
@inject DialogService DialogService
<EditorButton Click=@ShowSource Icon="settings_ethernet" Title="Display Source Code" />
@code {
[CascadingParameter]
public RadzenHtmlEditor Editor { get; set; }
[Parameter]
public EventCallback<string> SourceCodeChanged { get; set; }
async Task ShowSource()
{
await Editor.SaveSelectionAsync();
//TODO when does not click outside editor there is old value without latest changes
var result = await DialogService.OpenAsync<HtmlEditorSourceCodeDialog>("Source Code", new Dictionary<string, object>()
{
{"SourceCode", Editor.Value}
}, new DialogOptions
{
Width = "90%",
Height = "90%"
});
await Editor.RestoreSelectionAsync();
if (result != null)
{
await Editor.ExecuteCommandAsync("selectAll");
await Editor.ExecuteCommandAsync(HtmlEditorCommands.InsertHtml, result);
}
}
}