Hi Patrick,
Greetings from Syncfusion support.
We have validated your queries,
Query 1: “when I enter "@Name" and press space I want to replace the "@Name" text with my predefined MarkUp. I want to remove the @Name and Insert the HTML and set the cursor position to the end of the new HTML.”
This can be achieved by wrapping the div element around the Rich Text Editor and binding the ‘onkeydown’ event to the div element and then checking the Rich Text Editor value and then replacing the ‘@name’ with the predefined HTML content. And then the cursor pointer can be set to the end of the newly inserted HTML using the JsInterop concept. We have prepared a sample for your reference,
Code Snippet:
Host.cshtml
|
<head>
. . .
<script src="~/jsinterop.js"></script>
</head> |
Index.razor
|
@using Syncfusion.Blazor.RichTextEditor
<div @onkeydown="@keyDownHandler">
<SfRichTextEditor @ref="@rteObj" ID="defaultRTE" SaveInterval="1" @bind-Value="@rteValue">
</SfRichTextEditor>
</div>
@code {
[Inject]
IJSRuntime JsRuntime { get; set; }
SfRichTextEditor rteObj;
public string rteValue { get; set; }
public int count { get; set; } = 0;
public async Task keyDownHandler(KeyboardEventArgs args)
{
if (this.rteValue != null && args.Code == "Space" && this.rteValue.Contains("@name"))
{
this.rteValue = this.rteValue.Replace("@name", "<span class='hqTag' contenteditable='false' id='currentID" + this.count.ToString() + "'>Content Inserted</span> ");
await Task.Delay(50);
JsRuntime.InvokeAsync<string>("RichTextEditor.setCursorPointer", this.count.ToString());
count++;
}
}
} |
wwwroot/jsinterop.js
|
window.RichTextEditor = {
setCursorPointer: function (currentIDNumber) {
var rteInstance = document.getElementById('defaultRTE').blazor__instance;
var element = rteInstance.inputElement.querySelector('#currentID' + currentIDNumber).nextSibling;
if (element !== null) {
var range = document.createRange();
range.setStart(element, 1);
rteInstance.formatter.editorManager.nodeSelection.setRange(document, range);
}
}
} |
Query 2: “While working on this I recognized that the ‘UpdateValue’ of the Rich Text Editor does not do anything. In this example, there is a button to update the text and move the cursor position after that. But I never get the new text displayed”.
The method ‘UpdateValue’ is not a public method, and it will not update the Rich Text Editor value. The value can be updated using the Value property of the Rich Text Editor. Please check the above -hared code snippet for the Value change and also to set the cursor pointer.
Please check the above code snippets and the sample and let us know if it comes close to your requirement.
Regards,
Revanth
