Get the font color of selected range from the RichTextEditor’s content.

[???]

Hi,

I wondered how can i get the font color of selected range from the RichTextEditor’s content.

I tried to use the getRange() method, but it failed.

Could you help me?

[Vinitha Jeyakumar]

Hi ,

We have prepared a sample as per your requirement to get the font color of the selected text in the RichTextEditor.

Code snippet:

document.getElementById('dialogBtn').onclick = (): void => {

  var sel = window.getSelection();

  var range = sel.getRangeAt(0);

  var pointedTag = range.startContainer.parentNode;

  console.log(pointedTag.style.color);

};

Sample: https://stackblitz.com/edit/fzo3nh?file=index.ts,index.html

Regards,

Vinitha

[???]

Hi Vinitha,

Thank you for your answer.

I checked the answer well, but there is a problem that it doesn't always give the right value.

If change the color partially, i cannot receive the color value from pointedTag.

because the structure of the HTML element changes.

This is also true when applying other properties such as bold and italic.

Is there any other way?

Regards,

Jane

[???]

And add,

As above,

Other toolbar items, such as BOLD and ITALIC, are being marked in the toolbar for the selected range.

But the font color is not.

(and I'm using inline mode in my Vue app.)

Is there a possibility that this will be modified?

or Can I know how to get the color value exactly like such as BOLD and ITALIC ?

Regards,

Jane

[Vinitha Jeyakumar]

Hi,

Query 1. "If change the color partially, i cannot receive the color value from pointedTag. because the structure of the HTML element changes. This is also true when applying other properties such as bold and italic.?"

We have modified the solution by applying some conditions as per your use case scenario. please check the sample below, similarly you can change the conditions as per your requirement.

Sample: https://stackblitz.com/edit/fzo3nh-qmg7zi?file=index.ts,index.html

Query 2. "Other toolbar items, such as BOLD and ITALIC, are being marked in the toolbar for the selected range. But the font color is not. Is there a possibility that this will be modified? or Can I know how to get the color value exactly like such as BOLD and ITALIC ?"

We want to let you know that the Font color toolbar item only shows the applied color at the bottom of the icon, and it won't get highlights like the bold and italic. This is the intended behavior of the Rich Text Editor control.

Regards,

Vinitha

[???]

Hi Vinitha,

Thank you for your answer.

I tried to use the solution, but it has some problems...

So I want to know if there is any possibility to added a method in Syncfusion RichTextEditor that returns the font color of the selected range.

(such as getSelectedHtml, getSelection ...)

Regards,

Jane

[Vinitha Jeyakumar]

Hi Jane,

By default, we didn't provide any methods to get the font color of the selected text content in RichTextEditor. Can you please share us with the details of the problems you have faced at your end to use the suggested solution in our last update?

Regards,

Vinitha

[???]

Hi  Vinitha,

Thank you for your answer.

If the selected range used more than one color, I want to know that.

so I checked when the first and last colors in selected range were different

using 'startContainer' and 'endContainer' in getRange Method.

by comparing those two colors.

But the problem is when the color of the text in the middle area of the selected range.

such as

Is there any solution?

Regards,

Jane

[Vinitha Jeyakumar]

Hi Jane,

Query "If the selected range used more than one color, I want to know that"

Your requirement to get the color of the selected multiple text colors can be achieved by using the below suggested solution using getSelectedHtml method,

Code snippet:

document.getElementById('dialogBtn').onclick = (): void => {

  var divElem = document.createElement('div');

  divElem.innerHTML = document

    .getElementById('defaultRTE')

    .ej2_instances[0].getSelectedHtml();

  for (var i = 0; i < divElem.childNodes.length; i++) {

    if (divElem.childNodes[i].tagName == 'SPAN') {

      console.log(divElem.childNodes[i].style.color);

    }

  }

};

Sample: https://stackblitz.com/edit/fzo3nh-hofpow?file=index.ts,index.html

Regards,

Vinitha