Add double underline feature to Editor component.

[Karl]

Hi,

I have a problem and I want you to help me solve it.

Let's implement the double underline feature in the Editor component.

In CSS this can be solved using ::before, ::after selectors.

How would I implement this feature?

[Vessy]

Hi, Karl,

You can implement a double underline editor tool in the Editor by applying custom text-decoration inline styles to the selected text:

• https://www.telerik.com/kendo-react-ui/components/editor/tools/#toc-using-custom-tools 

For example, you can have a similar implementation:

• https://stackblitz.com/edit/react-9yqkym-yp9nnr?file=app%2FbackgroundColorTool.tsx,app%2Fmain.tsx 

I hope this helps but do let me know in case I can assist you any further on this matter.

Regards,
Vessy
Progress Telerik

[Karl]

Thanks for your kind response, Ms. Vessy.

I have another problem and I am sure that you can help me this time too.
My attach image file can explain about my new problem.

And I can't use font and color feature of kendo-React in my project while I inserted those functions.

Perhaps, it's because I am using a trial version, isn't it? Can I  fix this issue when I use non-free version?

I am confident that you will respond kindly this time as well.

Best Regards,

Karl W.

[Vessy]

Hello, Karl,

The newly faced behavior is specific to the font loaded in the Editor and how it treats the double underline style. It not related neither to the licensing of the Editor, nor its functionality and can be resolved only by choosing a more appropriate font family.

You can observe the same behavior with this font in a simple div like demonstrated here: https://dojo.telerik.com/IMUYICal 

[Karl]

Thanks for you answers.

I am sorry, but there seems to be some errors.

I can solve double underline feature based on your answers. 

My new facing problem was that my font-size group and font-family group, color group are not working.

When I clicked, I expected drop down box contains features, but it is not working. I thought it is related to license because I can check Kendo-react warning in google dev tools.

I hope your responsible answers.

Best regards.

[Vessy]

Thank you for the clarification, Karl. I tested the all font-related tools in the provided sample but they work properly at my end. Can you see if you are reproducing the issue in the following sample as well? The components in Stackblitz are also unregistered:

• https://stackblitz.com/edit/react-9yqkym-anrrb9?file=app%2Fmain.tsx