Rich text editor , i need add table

[kenchan1604]

I don't know Rich text editor how to add and edit a table.

can add table Feature and color text feature

I read the documentation, but I still can't do it.
https://tiptap.dev/product/editor

[kenchan1604]

hi have any one can hlep ?

[ghabriel25]

@kenchan1604

• install the extension first https://tiptap.dev/docs/editor/extensions/functionality/table-kit#install

npm install @tiptap/extension-table

• register the extension https://fluxui.dev/components/editor#extensions

import { TableKit } from '@tiptap/extension-table'

document.addEventListener('flux:editor', (e) => {
    e.detail.registerExtensions([
        TableKit.configure({
            table: { resizable: true },
        }),
    ])
})

[kenchan1604]

i need Ctrl + C table Ctrl + V table is work,

but how to add the button ?

Look link this

/resources/js/app.js

`
document.addEventListener('flux:editor', (e) => {
let editor
e.detail.registerExtensions([
TableKit.configure({
table: {
HTMLAttributes: {
class: 'my-3 table-auto w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 border border-white border-black dark:border-white',
},
},
tableHeader:{
HTMLAttributes: {
class: 'px-6 py-4 border border-black dark:border-white dark:text-white bg-gray-700'
},
},
tableCell: {
HTMLAttributes: {
class: 'px-6 py-4 border border-black dark:border-white'
},
},
}),
}),
]);

`

[ghabriel25]

@kenchan1604 Is it related to your first question? Because I'm not following what you mean

[kenchan1604]

Yes , I need to add some buttons for editing tables, but I don't know how.

I can only copy the table, paste it into the editor, but I can't modify it(add or del row / colum).

[ghabriel25]

You can read it all here https://tiptap.dev/docs/editor/extensions/nodes/table-row