CODEWITHSUNDEEP
javascriptcssreactjswysiwygjodit
Syed Adil
Syed Adil

Reputation: 21

Jodit table border color

When you create a table in Jodit Editor, the table doesn't have any styling. We have the option to select border color for cells. If i select all the cells and assign a color, we can see the color in editor. Table cells with black borders

But it doesn't reflect in preview.

Transparent borders in preview

Any lead on how to solve this is appreciated.

Upvotes: 2

Views: 1107

Answers (2)

Rohit Kori
Rohit Kori

Reputation: 11

I've Identified the Problem occurring due to not proper styles are used While applying border in JoditEditor,

instead of Existing style, please paste this code in Source mode of JoditEditor and Check Your Preview,

<table style="border-collapse:collapse;width: 100%;">
    <tbody>
        <tr style="border-color: black;">
            <td style="border: 1px solid;">No</td>
            <td style="border: 1px solid">Name</td>
            <td style="border: 1px solid">City</td>
        </tr>
        <tr>
            <td style="border: 1px solid;">1</td>
            <td style="border: 1px solid">Test</td>
            <td style="border: 1px solid">XYZ</td>
        </tr>
    </tbody>
</table>

You can Change the style for tag at the time of submitting the Rich Text editor

if (value.includes("<td")) {
      value = value.replaceAll(
        "<td",
        `<td style="border:1px solid black"`
      );
    }

Thank You,

Upvotes: 1

Supitchaya
Supitchaya

Reputation: 511

because the table doesn't have border style.

Upvotes: 0

Related Questions