[BUG] Strips images inside of tables AND losing alignment on images

[changyeamoon]

• [ ] First, I just want to say that this library is great and it deserves more credit!

Problem I am having issues with the editor stripping some attributes and tags when i set its initial value. Mainly images and alignment, and also images in table cells

Here is a code sandbox to demonstrate my issues - https://codesandbox.io/s/suneditor-image-table-bugs-l49t1?file=/src/App.tsx

Expected

• The images stay in the table cells.
• the alignment styling does not get stripped

These are the only problems im having when it comes to importing html to the editor.

Is there a way to customize the parsing when using setContents?

[JiHong88]

@changyeamoon ,

The images stay in the table cells.

Fixed a bug where the image tag disappeared.

the alignment styling does not get stripped

When pasting, the editor deletes the style properties of all tags except the "span" tag. This is to prevent excessive style attributes from occurring when pasting from outside.

I'm not sure if this is a meaningful behavior right now. I'll check this again. In the current version this can be solved by adding an option like this:

attributesWhitelist: {
    all: 'style'
},

I'll notify you after the version update.

[changyeamoon]

Thanks @JiHong88.

I already have the following in my codesandbox and it still strips away the alignment styling. It is just alignment with images that is the issue

attributesWhitelist: {
    all: 'style'
},

[JiHong88]

@changyeamoon , Images cannot be inside a P tag. The image is pulled out of the P tag and wrapped in a div. Therefore, the style of the P tag does not affect the image.

<img data-align="center" src=\"https://force-nosoftware-10552-dev-ed.cs92.my.salesforce.com/servlet/servlet.ImageServer?id=0153F000000iJ3g&oid=00D3F000000JUyg\" ></img>

The alignment style of the current image is not checked separately, so put the'data-align' attribute. This part will be improved in version 2.35.0.

[JiHong88]

The 2.35.0 version has been updated. If this issue has not been resolved, please reopen this issue. Thank you.

[changyeamoon]

Thanks @JiHong88 ! Do the wrapper libraries like https://github.com/mkhstar/suneditor-react also get updated?

[JiHong88]

suneditor-react is not managed by me. It will probably be updated sooner or later.

[masnoonJunaid]

I am still facing this issue, despite choosing alignment from image upload tools, it doesn't position to chosen side on viewport, it remains left aligned always, not taking center, right, etc, I am using suneditor-react

[aburd]

I am using version 2.46.3. In my case, pasting

<title>見積もりのお知らせ</title>

<table style="width: 100%;">
    <tbody>
        <tr>
            <td style="text-align: center;">
                <img src="logo.png" alt="Company Logo" style="width: 200px; height: auto;" />
            </td>
        </tr>
    </tbody>
</table>

results in

<title>見積もりのお知らせ</title>
<table style="width: 100%;">
    <tbody>
        <tr>
            <td style="text-align: center;"></td>

            <div class="se-component se-image-container __se__float-center">
                <figure style="width: 200px;">
                    <img
                        src="logo.png"
                        alt="Company Logo"
                        style="width: 200px; height: auto;"
                        data-proportion="true"
                        data-align="center"
                        data-index="3"
                        data-file-name="logo.png"
                        data-file-size="0"
                        data-origin="200px,auto"
                        data-size="200px,auto"
                    />
                </figure>
            </div>
        </tr>
    </tbody>
</table>

It seems that the nesting of elements breaks when an image is involved.

[EricBCoding]

@JiHong88 I can confirm that adding an <img> element into <td> still results in broken formatting as of 2.47.5. Example:

<p>Test</p>

<table>
  <tbody>
    <tr>
      <td>
        <img src="something.png">
      </td>
      <td>
        <div><br>
        </div>
      </td>
    </tr>
  </tbody>
</table>

This becomes:

<p>Test</p>

<div class="se-component se-image-container __se__float- __se__float-none">
  <figure>
    <img src="something.png" alt="" data-proportion="true" data-align="none" data-file-name="something.png" data-file-size="0" data-origin="," data-size="," data-rotate="" data-rotatex="" data-rotatey="" width="" height="" data-percentage="auto,auto" style="" data-index="0">
  </figure>
</div>

<table>
  <tbody>
    <tr>
      <td></td>
      <td>
        <div><br>
        </div>
      </td>
    </tr>
  </tbody>
</table>

So it's getting moved out of the table entirely.

Would it help if I opened a separate issue?

Thank you.

[ncoevoet]

Hello, i encountered the same problem, fix is planned for next release ? Thanks.

[EricBCoding]

@ncoevoet The development focus seems to be on SunEditor 3 right now. I upgraded to it and can confirm that it handles images inside of tables correctly. Code formatting in SE 3 is a lot better overall.

[ncoevoet]

@ncoevoet The development focus seems to be on SunEditor 3 right now. I upgraded to it and can confirm that it handles images inside of tables correctly. Code formatting in SE 3 is a lot better overall.

Well, i use suneditor via npm installed package, i do not want to handle a dependency to a custom branch under development, i guess i will have to wait then ... thanks :)

[JiHong88]

@changyeamoon @ncoevoet @aburd @EricBCoding This issue seems to be fixed in version 2.47.5.