Converting Percentage Table Width to Pixels in Angular Rich Text Editor

When working with tables in a Rich Text Editor, you may need to convert the percentage width of a table into pixel values. This can be accomplished by utilizing the actionComplete event of the Rich Text Editor. Below is a guide on how to implement this functionality.

Initialize the RichTextEditor

Set up the RichTextEditor with the necessary toolbar settings and properties. Bind the actionComplete event to the RichTextEditor.

Here is a sample code snippet,

<ejs-richtexteditor
    #toolsRTE
    id="alltoolRTE"
    [toolbarSettings]="tools"
    (actionComplete)="actionCompleteHandler($event)">
</ejs-richtexteditor>

Configure the actionComplete Event

• The actionComplete event is triggered after an action is completed in the Rich Text Editor, allowing you to manipulate the table’s properties.
• Use the getClientRects() method to obtain the width of the table in pixels.
• Update the table’s width style to the calculated pixel value.

Here is a sample code snippet demonstrating how to convert the percentage value of the table width into pixels:

public actionCompleteHandler(e: any): void {
 if (e.requestType == 'Table') {
    var pixelValue = Math.round(e.elements[0].getClientRects()[0].width);
    e.elements[0].style.width = pixelValue.toString() + 'px';
  }
}

Conclusion

I hope you enjoyed learning How to Convert Percentage values of Table Width to Pixels in Angular Rich Text Editor.

You can refer to our Angular Rich Text Editor feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Rich Text Editor example to understand how to create and manipulate data.

• JavaScript getClientRects() Method
• CSS Width Property