Is it possible to change table selection appearence?

[Kyung-hyun Roh]

I want to change table selection appearence like below.

As you see it shows selected cells as blocked area. But ej2-vue-richtexteditor table is change it's border color only So it's hard to recognize it's state of selection.

Is it possible to change it's appearence for selected cells?

If it's possible then How can I do that?

And I want to change the cursor style when hovering on selected cells as default cursor style.

Can I change it's cursor style?

Then let me know how can I change it.

Thanks.

[Vinitha Jeyakumar]

Hi Kyung,

Your requirement to change the background color of the selected cells and cursor styles while hovering over the selected cells in the tables of Rich Text Editor can be achieved by customizing the below CSS styles code.

Code snippet:

<style>

.e-richtexteditor .e-rte-content .e-content table td.e-cell-select,

.e-richtexteditor .e-rte-content .e-content table th.e-cell-select {

  background-color: lightgrey;

  cursor: context-menu;

}

</style>

Sample: https://codesandbox.io/s/awesome-feynman-428k89

Regards,

Vinitha

[Kyung-hyun Roh]

It works!

Thanks!

[Vinitha Jeyakumar]

Hi Kyung,

You are always welcome.

Regards,

Vinitha

[Kyung-hyun Roh]

Hi Vinitha,

I got some problem.

Copying selected table's cell background is affected to new copied cell.

Video linke: https://youtu.be/upa_9hSiGZw

[Vinitha Jeyakumar]

Hi Kyung,

We have tried to replicate the reported issue at our end. but unfortunately, we didn't face the reported issue while copy and pasting the selected cells. please check the video illustration for your reference,

Video illustration: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Vid_RTESelect-333192120

Can you please share us with the exact issue reproducing steps and issue replicating sample to further validate on our end.

Regards,

Vinitha

[Kyung-hyun Roh]

As you see below It's selected border style is copied on new table.

Reproducing steps:

1. make table 3 x 4
2. input texts
3. drag text from second cell to third cell
4. Ctrl + C
5. Paste it under the table

Video Link : https://youtu.be/6jvGMHEjUfw





asfe	asefasfeaefe	asfeaseffef
fasf	asfeasfefef	asefasfesafeef
sefasfe	asefasefefef	asefefe

asfeasfe

asefasfeaefe

asfeaseffef

asfeasfe

asefasfesafe

asfeasfe

asefasfesafe

asefasef

asef

[Revanth Krishnan]

Hi Kyung,

We have validated your query and we are able to replicate the reported issue on our end. This issue occurs because when copying the table cells, by default, the selected cell has the border styles, which are also copied, so when pasted, the styles with the border selected are pasted. This issue can be resolved by removing the class ‘e-cell-selected’ and replacing the border styles with the default border styles of the table in the “afterPasteCleanup” event. We have prepared a sample for your reference.

Code Snippet:

<template>

  <div>

    <ejs-richtexteditor :toolbarSettings="toolbarSettings" :afterPasteCleanup="afterPasteCleanupEvent"></ejs-richtexteditor>

  </div>

</template>

 

<script>

import {

  . . .

  PasteCleanup,

} from "@syncfusion/ej2-vue-richtexteditor";

 

export default {

  . . .

  methods: {

    afterPasteCleanupEvent: function (args) {

      var tempElem = document.createElement("div");

      tempElem.innerHTML = args.value;

      var borderStyle;

      if (tempElem.querySelector('td:not([class="e-cell-select"])') != null) {

        borderStyle = tempElem.querySelector('td:not([class="e-cell-select"])').style.border;

      } else {

        borderStyle = "1px solid black";

      }

      var borderRemoveElem = tempElem.querySelectorAll('td[class="e-cell-select"]');

      for (var i = 0; i < borderRemoveElem.length; i++) {

        borderRemoveElem[i].classList.remove("e-cell-select");

        borderRemoveElem[i].style.border = borderStyle;

      }

      args.value = tempElem.innerHTML;

    },

  },

  . . .

  provide: {

    richtexteditor: [Toolbar, Link, Image, HtmlEditor, Table, PasteCleanup],

  },

};

</script>

Sample: https://codesandbox.io/s/bold-night-kshz5j?file=/src/App.vue

Documentation: https://ej2.syncfusion.com/vue/documentation/rich-text-editor/paste-cleanup/

API Reference: https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/#afterpastecleanup

Please check the above code snippet, the sample, and the documentation and let us know if it resolves the issue on your end.

Regards,

Revanth