Removing the table border

[rafaeldorval]

Hello, I have a question about how to make a feature that my client asked for. He wants a button that turns the table's borders on and off. I created a custom plugin, but it is not working very well. How could I act? How can I request to take the value already added in SunEditor, remove the borders in real time and save this way?

My custom plugin

const switchBorderTable = { name: 'borderTable', display: 'command', title: 'Remover/adicionar borda tabela', buttonClass: '', innerHTML: '', add: function (core, targetElement) { const context = core.context; context.customCommand_2 = { targetButton: targetElement }; }, active: function (element) { if (!element) { this.util.removeClass(this.context.customCommand_2.targetButton, 'active'); } else if (/^BORDERTABLE$/i.test(element.nodeName) && element.style.backgroundColor.length > 0) { this.util.addClass(this.context.customCommand_2.targetButton, 'active'); return true; }

  return false;
},
action: function () {
  if (!this.util.hasClass(this.context.customCommand_2.targetButton, 'active')) {
    setDocData({ ...docData, txdocumento: docData.txdocumento.replace(/<tr>/g, '<tr style="border: none>') })
    // setDocData({ ...docData, txdocumento: docData.txdocumento.replace(/<td>/g, '<td style="border: none>') })
    // setDocData({ ...docData, txdocumento: docData.txdocumento.replace('<table>', '<table style="border: none>') })
    const newNode = this.util.createElement('BORDERTABLE');
    newNode.style.backgroundColor = '#fff';
    this.nodeChange(newNode, ['background-color'], null, null);
    const teste = this.util.getArrayItem('td')
    console.log('teste', teste)
  } else {
    console.log(this.util)
    this.nodeChange(null, ['background-color'], ['BORDERTABLE'], true);
  }
},

}

[JiHong88]

Hi, @rafaeldorval

Here is a simple example.

.sun-editor-editable table,
.sun-editor-editable table tr,
.sun-editor-editable table th,
.sun-editor-editable table td {
    border: none !important;
}

.sun-editor-editable table.se-table-border,
.sun-editor-editable table.se-table-border tr,
.sun-editor-editable table.se-table-border th,
.sun-editor-editable table.se-table-border td {
    border: 1px solid #e1e1e1 !important;
}

const switchBorderTable = {
  name: "borderTable",
  display: "command",
  title: "Remover/adicionar borda tabela",
  buttonClass: "",
  innerHTML: "",
  add: function(core, targetElement) {
        const context = core.context;
        context.customCommand_2 = {
        targetButton: targetElement,
        tableElement: null
        };
  },
  active: function(element) {
    const context = this.context.customCommand_2;
    if (!element) {
        context.tableElement = null;
        this.util.removeClass(context.targetButton, "active");
    } else if (/^TABLE$/i.test(element.nodeName)) {
        if (this.util.hasClass(element, 'se-table-border')) this.util.addClass(context.targetButton, "active");
        else this.util.removeClass(context.targetButton, "active");
        context.tableElement = element;
        return true;
    }

    return false;
  },
  action: function() {
    const context = this.context.customCommand_2;
    if (!context.tableElement) return;

    if (this.util.hasClass(context.targetButton, "active")) {
        this.util.removeClass(context.tableElement, 'se-table-border');
        this.util.removeClass(context.targetButton, "active");
    } else {
        this.util.addClass(context.tableElement, 'se-table-border');
        this.util.addClass(context.targetButton, "active");
    }
  },
};

[rafaeldorval]

It worked perfectly, I wasn't really understanding the action functions, but I think I managed to understand it better now.

[rafaeldorval]

Hello, after the last update, this configuration is bringing this error, when I click on the table, or even to add an image

Obs: I'm using react in this project

[rafaeldorval]

From what I tested here, it is giving error when I add any custom plugin, even the example that is in the documentation.

[JiHong88]

@rafaeldorval Sorry for the delay in reply. It looks like you added the plugin in the wrong way. Can I see the editor generated code?

[jlbrd]

Hi @JiHong88, @rafaeldorval, I use suneditor-react and I added the plugin. When I click the button I enter in the methods. But I dont understand how to add the custom css to disable the borders. Thank you

[JiHong88]

@jlbrd I can't understand the question. :( There is no special way to add CSS.