RTE add extra class e-rte-table to every table in html

[Khalid Mahmood]

@{
string[] tableToolbar = {};
}

<e-richtexteditor-quicktoolbarsettings table="@tableToolbar"></e-richtexteditor-quicktoolbarsettings> by using this toolbar doesn't show Table Options but when I switch RTE to CodeView and

insert raw Html which contains Table and toggle codeview to edit mode.

RTE add class="e-rte-table" to every table in html code

e-rte-table style is defined by default in css file and had border property that is not required.

I want that RTE should not change any Table Html Code and Completely Disable Any Table options in RTE

[Vinothkumar Yuvaraj]

Hi Khalid,

We want to let you know that we do not have an option to prevent the default table action in the Rich Text Editor. But you can achieve the desired result by applying specific styles to the table element within the Rich Text Editor. These styles will effectively remove the interaction with the table . Please see the attached sample for your reference.

<style>

    .e-richtexteditor .e-content table {

pointer-events: none;

    }

</style>

We have removed the e-rte-table class in the table element of the Rich Text Editor by using the change event. Please take a look at the following code.

<script>

    var rteObj;

    function created() {

rteObj = this;

    }

    function change(){

if (rteObj.inputElement.querySelector("table.e-rte-table") != null){

rteObj.inputElement.querySelector("table.e-rte-table").classList.remove("e-rte-table")

}

    }

</script>

Note : When you remove the e-rte-table class, the border is also removed from the table element. If you want to apply the border to that table, you can use the following style.

    .e-richtexteditor .e-content table th, .e-richtexteditor .e-content table td {

border: 1px solid #b6aca2 !important

    }

Regards,

Vinothkumar

Attachment: SyncfusionWebApplication2_77f088ce_8d74b807.zip