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

3 Answers 134 Views
Editor
Sebahattin
Top achievements
Rank 1
Iron
Iron
Sebahattin asked on 06 May 2024, 06:48 AM
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>

3 Answers, 1 is accepted

Sort by
0
Yordan
Telerik team
answered on 09 May 2024, 08:21 AM

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

    Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
    Sebahattin
    Top achievements
    Rank 1
    Iron
    Iron
    commented on 13 May 2024, 06:43 AM

    Hello Yordan,
    thank you for the answer
    Regards
    0
    Sebahattin
    Top achievements
    Rank 1
    Iron
    Iron
    answered on 02 May 2025, 07:53 AM

    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>
    0
    Yordan
    Telerik team
    answered on 07 May 2025, 07:13 AM

    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

    Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

    Tags
    Editor
    Asked by
    Sebahattin
    Top achievements
    Rank 1
    Iron
    Iron
    Answers by
    Yordan
    Telerik team
    Sebahattin
    Top achievements
    Rank 1
    Iron
    Iron
    Share this question
    or