How to Add Inline Styles to Image and Table Elements in the Rich Text Editor

3 mins read

This article explains how to add inline styles to image and table elements in the 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

By following the steps outlined above, you can easily add inline styles to image and table elements in the rich text editor. This enhances the visual presentation of your content and allows for greater customization.

Additional References

Did you find this information helpful?

Yes

Comments (0)