HTML editor.value() and editor.body.innerHTML return different values

[Sebahattin]

Hello,

When focused in the HTML editor, I set the default font and font size and add a p tag to the outermost.
Then when I try to get the editor value with editor.value() it automatically gets a space ' ' is being added, but when I read it with editor.body.innerHTML there is no space.
This does not allow you to check whether the space was added by the user.

If from now on I get the editor value with editor.body.innerHTML, could problems occur?
Or what can I do so editor.value() doesn't automatically add spaces?

Thanks

 

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({ tools: [
    "bold", "italic", "underline", "fontName", "fontSize"
  ]});

var editor = $("#editor").data("kendoEditor");

$(editor.body).focus(function (e) {
    editor.exec("fontName", { value: "Tahoma" });
    editor.exec("fontSize", { value: "10pt" });
    var content = editor.value();
    
    if (content.indexOf('<p') !== 0)
        editor.value('<p>'+ content +'</p>');

    console.log(editor.value());
    console.log(editor.body.innerHTML);
});

</script>

Result:
editor.value():  <p><span style="font-family:Tahoma;font-size:10pt;">&nbsp;</span></p>
editor.body.innerHTML:  <p><span style="font-family:Tahoma;font-size:10pt;"></span></p>

[Yordan]

Hello Sebahattin,

Thank you for the provided details.

This is the expected behavior of the Editor component.

I see no issues with using the innerHTML property if that works for your case.

If you face any issues, please let us know. 

Regards,
Yordan
Progress Telerik

[Sebahattin]

Hello Yordan,
thank you for the answer
Regards

[Sebahattin]

Hello again,
When I read the editor value using editor.body.innerHTML, the color values are converted from hex codes to RGB format.
Do you have any suggestions to prevent this behavior?
Thank you.

editor.value()
<p><span style="font-family:Calibri;font-size:9pt;color:#00a2e8;">test text</span></p>

editor.body.innerHTML
<p><span style="font-family: Calibri; font-size: 9pt; color: rgb(0, 162, 232);">test text</span></p>

[Yordan]

Hello Sebahattin,

The issue you're encountering is due to how browsers handle color values in the DOM. When you set a color as a hex value, the browser may normalize it to an equivalent RGB value when rendering the DOM. This is standard behavior and not specific to the Kendo Editor.

Why This Happens:

1. Browser Normalization: Browsers often normalize styles to a consistent format for internal representation. For colors, this means converting hex values to RGB or HSL formats.When you retrieve the innerHtml or outerHTML of an element, the browser provides the normalized representation.
2. CSSOM (CSS Object Model): The browser's CSSOM converts all color values to a standard format (usually RGB) for consistency and performance.

If you need the colors to remain in hex format in the innerHTML, you can store the color value when the execute event is called and use it to convert the RGB back to HEX.

Regards,
Yordan
Progress Telerik