How to Add Styles to Image and Table in JavaScript Rich Text Editor?

This article explains how to add inline styles to image and table elements in the JavaScript Rich Text Editor. To add inline styles to images and tables, you can utilize the actionComplete event of the rich text editor. Below is a step-by-step guide on how to implement this functionality.

HTML Setup

Your HTML should include a div with the ID defaultRTE, where the rich text editor will be rendered:

<div id="defaultRTE">
    <p>The rich text editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update content. Users can format their content using standard toolbar commands.</p>
</div>

Step 1: Initialize the Rich Text Editor

Import the necessary modules and configure the rich text editor with the toolbar settings.

import { RichTextEditor, Toolbar, Link, Image, Count, HtmlEditor, QuickToolbar, Table } from '@syncfusion/ej2-richtexteditor';

RichTextEditor.Inject(Toolbar, Link, Image, Count, HtmlEditor, QuickToolbar, Table);

let defaultRTE = new RichTextEditor({
    toolbarSettings: {
        items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
                'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
                'LowerCase', 'UpperCase', '|',
                'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
                'Outdent', 'Indent', '|', 'CreateTable',
                'CreateLink', 'Image', '|', 'ClearFormat', 'Print',
                'SourceCode', 'FullScreen', '|', 'Undo', 'Redo']
    },
    actionComplete: actionCompleteFunc,
});
defaultRTE.appendTo('#defaultRTE');

Step 2: Define the Action Complete Function

Next, define the actionCompleteFunc function to apply the inline styles when a table or image is added.

• CSS Styles: The cssTableStyle and cssImageStyle variables define the inline styles for the table and image elements, respectively.
• Event Handling: The actionCompleteFunc checks the requestType of the action. If a table is created, it applies the defined styles to each table cell (td). If an image is added, it applies the styles to the image element.

function actionCompleteFunc(args) {
    let cssTableStyle = 'border: 2px solid red; height: 50px; width: 50px;';
    let cssImageStyle = 'height: 500px; width: 250px; border:2px solid green';
    
    if (args.requestType === 'Table') {
        let tdElement = args.elements[0].querySelectorAll('td');
        for (let i = 0; i < tdElement.length; i++) {
            tdElement[i].setAttribute("style", cssTableStyle);
        }
    }
    
    if (args.requestType === 'Image') {
        let imgElement = args.elements[0];
        imgElement.setAttribute("style", cssImageStyle);
    }
}

Conclusion:
I hope you enjoyed learning about how to add styles to image and table in JavaScript Rich Text Editor.

You can refer to our JavaScript Rich Text Editor feature tour page to learn about its other groundbreaking feature representations and documentation to understand how to present and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Additional References

• Syncfusion Rich Text Editor Documentation
• WYSIWYG Editor Overviewdd/d