ckeditor / ckeditor5

Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.
https://ckeditor.com/ckeditor-5
Other
9.65k stars 3.71k forks source link

setAttribute is not working as expected #17029

Open Mizan-Rifat opened 2 months ago

Mizan-Rifat commented 2 months ago

I have created a custom Plugin to create a borderless table. Here is my implementation:

import { ButtonView, Plugin } from 'ckeditor5';

export class BorderlessTable extends Plugin {
  init() {
    const editor = this.editor;

    editor.ui.componentFactory.add('borderlessTable', locale => {
      const view = new ButtonView(locale);

      view.set({
        label: 'Make Table Borderless',
        icon: '<svg>...</svg>',
        tooltip: true
      });

      view.on('execute', () => {
        console.log({ editor });

        const selection = editor.model.document.selection;
        const table = selection.getSelectedElement();

        if (table && table.is('element', 'table')) {
          editor.model.change(writer => {
            writer.setAttribute('class', 'borderless-table', table);
          });
        }
      });

      return view;
    });
  }
}

✔️ Expected result

It should add the borderless-table class in the selected table.

❌ Actual result

No class is added.

DerSchimi commented 2 months ago

I have the same problem. Can anyone tell me something about it? My code is almost identical, am I doing something wrong? This can't be so hard.

DerSchimi commented 1 month ago

@Mizan-Rifat this might probably help you: https://github.com/ckeditor/ckeditor5/issues/8643

e.g.: editor.model.schema.extend( 'table', { allowAttributes: [ 'class' ] } );

editor.conversion.attributeToAttribute( { model: 'class', view: 'class' } );