Jodit doesn't keep table borders

[elshobokshy]

What jodit looks like :

The result I'm getting :

Any idea how to force jodit to give me the exact same HTML I visually see with the borders and all ?

[elshobokshy]

Another example is this :

With this result :

[xdan]

@elshobokshy You need append some styles what you use in your site in to editor

[elshobokshy]

@xdan isn't there a way to be able to get the exact same look without writing any custom styles ? My use of Jodit is to have the client create a table and get the exact same look. Isn't there a hacky way to get the exact same look? Like how to keep the borders and the cells width/height?

[elshobokshy]

@xdan otherwise, how to add a class to every table created using jodit automatically ? Something like class="jodit-table"

[Chiragjain55551]

You get a string from jodit editor.
let it be data
so you can manipulate data in onChange function of jodit editor as:

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

and then using
dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(data),
}}

you will get borders

[syedadil010]

Hey @elshobokshy,
How did you address this issue?

[elshobokshy]

@syedadil010 I gave up and used tinymce v5 as it was easier :) That's why I closed the issue, I'm reopening if @xdan wants to fix this

[NanTapia]

Based on the previos comment, I solved it like this:

if (content.includes("<table>")){
content = content.replaceAll("<table>", '"<table border="1" style="border-collapse:collapse;"');
}

[yeasin-hossain]

I just added this line in CSS for jodit-react table.
it will work fine.
td {
border:solid 1px;
}

[MrArun005]

Another example is this : With this result :

Table itself is not adding for me and im getting node element must be in the editor it is saying. How to resolve it

[ckc2715]

The generated html do not have border style, i fixed it by adding style to the defaultOptions when creating attributes.

Jodit.defaultOptions.createAttributes = { table: { style: 'border:1px solid;border-collapse:collapse;width: 100%;', }, tr: { style: ' border: 1px solid;', }, td: { style: ' border: 1px solid;', }, };

[CH-Chonsu]

as stated from @ckc2715 I added the createAttribute option into the config using jodit-react
const config = { theme: theme, createAttributes: { table: { style: 'border:1px solid #C5C6C8FF;border-collapse:collapse;width: 100%;', }, tr: { style: ' border: 1px solid #C5C6C8FF;', }, td: { style: ' border: 1px solid #C5C6C8FF;'}}, ...}
this does indeed fix it. thanks @ckc2715
cheers 😸

[serkaneksi78]

table border must be a attribute to be applied for each cell. otherwise border-color will be useless without border.