Paste with allowed tags

[Ezequiel Bertran]

Hi,

I would like to use the paste service with something between plainText and keepFormat. I need plain text except for some allowed tags. For example if I try to copy a text from MS Word having a bold word and a table to allow only the bold format and use plain for the rest.

It's that possible somehow? I only see the deniedTags

thanks

[Gunasekar Kuppusamy]

Hi Ezequiel,

Greetings from Syncfusion support.

We have validated your query `I would like to use the paste service with something between plainText and keepFormat. I need plain text except for some allowed tags`  and it can be achieved by using the afterPasteCleanup event.

You can customize the pasted value for your purpose in the afterpasteCleanup event. For your reference, we have created a sample.

Code snippets:

<ejs-richtexteditor id='pasteCleanupRTE' #pasteCleanupRTE [pasteCleanupSettings]="pasteCleanupSettings"  

    (afterPasteCleanup)="afterPasteCleanup($event)">  

    <ng-template #valueTemplate>  

      ...  

    </ng-template>  

</ejs-richtexteditor>  

public pasteCleanupSettings: PasteCleanupSettingsModel = {  

    prompt: false,  

    plainText: false,  

    keepFormat: true  

  };  

  

  public afterPasteCleanup(e) {  

    var cloneElement = document.createElement('div');  

    cloneElement.innerHTML = e.value;  

    var pasteValue = '';  

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

      if (cloneElement.children[i].tagName === 'TABLE') {  

        var row = (cloneElement.children[i] as HTMLTableElement).rows.length;  

        for (var j = 0; j < row; j++) {  

          var cell = (cloneElement.children[i] as HTMLTableElement).rows[j].cells.length;  

          for (var k = 0; k < cell; k++) {  

            var cellValue = (cloneElement.children[i] as HTMLTableElement).rows[j].cells.item(k).innerHTML;  

            pasteValue = pasteValue + cellValue;  

          }  

        }  

      } else {  

        pasteValue = pasteValue + cloneElement.children[i].outerHTML;  

      }  

    }  

    e.value = pasteValue;  

  }  

Sample:  https://stackblitz.com/edit/angular-ncrqhr?file=app.component.ts

In the above example, the table elements' styles have been cleared; the other elements have been pasted with their original styles.

Please check the sample and let us know if the solution helps,

Regards,

Gunasekar

[Ezequiel Bertran]

hmm I see but this will not scale easily if I want to clear format of more elements not only for tables, let's say for example if I want to exclude aslo underline or listed items I'll need to do it one by one.

An allowedTags property would be something nice to have.

thanks anywise

[Gunasekar Kuppusamy]

Hi Ezequiel,

Greetings from Syncfusion support.


We are currently validating your reported query. We will update the further information within two business days on or before the 14th July.

Regards,
Gunasekar

[Gunasekar Kuppusamy]

Hi EBEzequiel,

Good day to you.

We have further validated your query and we have considered “Provide support for paste action with allowed tags style” as a feature from our end and logged the report for the same and it will be included in any of the upcoming releases. 

You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/27023/provide-support-for-paste-action-with-allowed-tags-style

Until We suggest you use the below application-level solution.

In the below sample, you can configure the tags to the removeNodes variable.

public afterPasteCleanup(e) {

    var removeNodes = 'table, ul ,ol';

    var cloneElement = document.createElement('div');

    cloneElement.innerHTML = e.value;

    var pasteValue = '';

   . . .

  }

Sample: https://stackblitz.com/edit/angular-ncrqhr-szadgg?file=app.component.ts

Regards,

Gunaskear