HTML tags are converting/deleting in codeView

[developergaurav]

Describe the bug I am using sun-editor v3.4.1 in react. but it is not working right with image tags. I have whitelisted multiple tags and even tried to use se-component and setag as suggested in the document. It is replacing the tags and removes the parent tag automatically.

To Reproduce Steps to reproduce the behavior:

1. Go to CodeView
2. Paste the HTML mentioned below
3. Click on CodeView again
4. It's completely changing the HTML and putting the image tag outside of its parent.

Expected behavior It should remain to its own parent somehow and shouldn't remove parent tags.

Screenshots

Additional context <section class="content-pages page-brands se-component"> <div class="container __se__tag"> <div class="row"> <div class="col-lg-12"> <div class="brand-outer"> <div class="brand-items"> <a href="javascript:void()" target="_blank"> <img src="https://example.com/uploads/images/logo1.png" alt="" /> </a> </div> <div class="brand-items"> <a href="javascript:void()" target="_blank"> <img src="https://example.com/uploads/images/logo2.png" alt="" /> </a> </div> </div> </div> </div> </div> </section>

[JiHong88]

Add the "setag" class to the top-level element. <section class="__se__tag">

[developergaurav]

@JiHong88 If you notice, We already have this class on the top of the element as per the documentation. The funny thing is if we have one image in HTML it works fine but if we have multiple images, it behaves oddly. It removes parent HTML tags (in this case tag has been removed and image wrapper put outside of parent

brand-items). There are some other things we noticed when using this version. It works well in 2.15.0 (with these classes __se__tag or se-component and so on) which we have downgraded for now. But this version has other compatibility problems.

Dude! you are doing things wrong. See Here

@PRO-BROS What's wrong?

[developergaurav]

@JiHong88 If you notice, We already have this class on the top of the element as per the documentation. The funny thing is if we have one image in HTML it works fine but if we have multiple images, it behaves oddly. It removes parent HTML tags (in this case tag has been removed and the image wrapper put outside of the parent

brand-items). There are some other things we noticed when using this version. It works well in 2.15.0 (with these classes __se__tag or se-component and so on) which we have downgraded for now. But this version has other compatibility problems.

@JiHong88 Is there something you find at your end?

[JiHong88]

@developergaurav Can you show me the "HTML" string you are testing right now?

[developergaurav]

@developergaurav Can you show me the "HTML" string you are testing right now?

@JiHong88 Here is the "HTML" code:

`

`

[JiHong88]

@developergaurav "HTML" code is missing.

[developergaurav]

@developergaurav "HTML" code is missing.

@JiHong88 Actually, it is there but somehow GitHub makes it invisible. Attached again:

<section class="content-pages page-brands">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="brand-outer">
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo1.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo2.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo3.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo4.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo5.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo6.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo7.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo8.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo9.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo10.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo11.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo12.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo13.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo14.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo1.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo15.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo16.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo17.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo18.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo19.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo20.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo21.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo22.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo23.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo24.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo25.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo26.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo27.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo28.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo29.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo30.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo31.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo32.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo33.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo34.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo35.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo36.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo37.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo38.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo39.png" alt="" />
                        </a>
                    </div>
                    <div class="brand-items">
                        <a href="javascript:void()" target="_blank">
                            <img src="https://example.com/uploads/images/logo40.png" alt="" />
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

[JiHong88]

The 2.44.4 version has been updated. Thank you.

[developergaurav]

The 2.44.4 version has been updated. Thank you.

@JiHong88 Thanks to you! I will update it.