CODEWITHSUNDEEP
javascripthtmlcssexeccommand
WildWombat
WildWombat

Reputation: 416

execCommand adds unwanted styling to my elements

So I'm creating something like an online text editor. After going through some bugs, I just noticed that if I try to do something like justify some text in the center, it creates a div with text-align: center as it should. However, it also ends up creating a span with font and weight properties which I do not want since the font will be set by the user in a parent element and since the text is in a span with its own font and weight properties, it never gets applied.

So before I click the center button it'd look something like

    <div contenteditable="true">Write your text here!</div>

And after

    <div contenteditable="true">
        <div style="text-align: center;">
            <span style="font-size: 1rem; font-weight: 400;">Write your text here!</span>
        </div>
    </div>

When I want it to just be

    <div contenteditable="true">
        <div style="text-align: center;">
            Write your text here!
        </div>
    </div>

I took two pictures of before and after I use execCommand("justifyCenter") it on the element if you'd rather see the actual example.

Before

Before

After

After

Any suggestions on how I can make it so that either the parent elements font weight and size properties will be applied to the text rather than its own properties, or how to stop it from creating those properties in the first place.

Thanks!

Upvotes: 1

Views: 868

Answers (2)

DanVS
DanVS

Reputation: 1

Inserting HTML with the a div wrapped around the selection worked for me. You will need to style the div for your justification type.

document.execCommand("insertHTML", false, "<div style='text-align: center;'>"+ document.getSelection()+"</div>");

Upvotes: 0

WildWombat
WildWombat

Reputation: 416

Well I seem to have figured it out. For some reason since the parent contenteditable="true" didn't have it's font-size and font-weight set, it created that extra span. So I added those style attributes to the parent div and it stopped creating it. Hope this helps if someone ever comes across this problem again :)

Upvotes: 3

Related Questions