Create a custom toolbar button that inserts symbol or add custom html tag around the current selected text

[Ehab Zaky]

Dear Support Team,

I have learned how to add a custom toolbar button on blazor web assembly Rich Text Editor. However, I don't know how to:

1- Add symbol or text at the current position of cursor when a custom toolbar button is clicked. For example I need to add roman symbols using a dialog box.

2- Create custom HTML markup around selected text in Rich Text Editor when a custom toolbar button is clicked.

3- How to get feedback if the cursor is currently inside a custom tag to activate the corresponding custom button like default behavior with Bold or Italic buttons.

Appreciate if you can give example sample code on the above.

Regards,

Ehab Zaky

[Vinothkumar Yuvaraj]

Hi Ehab,

Query 1 : “Add symbol or text at the current position of cursor. For example, I need to add roman symbols using a dialog box.”

You can refer to the following demo link: In this demo sample, we have inserted the symbol based on the cursor position in the Rich Text Editor using the custom toolbar. Please take a look at the demo site.

Demo Link : https://blazor.syncfusion.com/demos/rich-text-editor/insert-special-characters?theme=fluent

Documentation for a custom toolbar : https://blazor.syncfusion.com/documentation/rich-text-editor/tools/custom-tool

Query 2 : “Create custom HTML markup around selected text in Rich Text Editor.”

We have achieved your requirement by using Jsintrop. When selecting the text and then pressing the "Insert HTML" button, we wrap the selected text into the <b> tag using the following code. Please refer to the following code and attached sample for your reference.

<button onclick="@click">Insert HTML</button>

Index.html

  <script>

  function wrapSelectedTextWithTag() {

const selection = window.getSelection();

const selectedText = selection.toString();

if (selectedText.length > 0) {

                const range = selection.getRangeAt(0);

                const newNode = document.createElement("span");

                newNode.innerHTML = "<b>" + selectedText + "</b>";

                range.deleteContents();

                range.insertNode(newNode);

}

        }

</script>

Query 3 : “How to get feedback if the cursor is currently inside a custom tag to activate the corresponding custom button like default behavior with Bold or Italic buttons.”

We have attached your requirement by using the following code using JSintrop on the Rich Text Editor created event. Please Take a look at the following sample.

Index.html

function created() {

sfBlazor.instances["defaultRTE"].inputElement.addEventListener("mousedown", () => {

                if (window.getSelection().anchorNode != null && window.getSelection().anchorNode.parentElement.classList.contains("custom-charactor")) {

             document.querySelector(".e-tbar-btn.custom-button").style.backgroundColor = "#565e64"

window.getSelection().removeAllRanges();

                }

                else {

                    if (document.querySelector(".e-tbar-btn.custom-button") != null) {

document.querySelector(".e-tbar-btn.custom-button").style.backgroundColor = ""

                    }

                }

});

}

Please take a look at the attached sample for your reference.

API Link : https://blazor.syncfusion.com/documentation/rich-text-editor/events#created

Regards,

Vinothkumar

Attachment: BlazorApp1_9a8b2d79_9af82d65.zip

[Ehab Zaky]

Sorry not getting back to you on time.

Appreciate your solution which works perfectly as requested.

Regards,

Ehab Zaky

[Gokulraj Devarajan]

You're welcome! Please get back to us if you need any assistance.