How to dynamically modify Rich Text Editor content?

[Stefan Colic]

Greetings Syncfusion team,

I would like to rearrange components inside Rich text editor content. Basically when 2 or more images are next to each other, for example like this:

 

I would like to be dynamically changed in this format:

<div class="album" style="display: flex; flex-wrap: wrap;"> <img class="first" src="path/to/first-image.jpg" alt="First Image" style="width: 300px; height: 200px; object-fit: cover; margin: 5px;"> <img src="path/to/image-2.jpg" alt="Image 2" style="width: 150px; height: 100px; object-fit: cover; margin: 5px;"> <img src="path/to/image-3.jpg" alt="Image 3" style="width: 150px; height: 100px; object-fit: cover; margin: 5px;"> <img src="path/to/image-4.jpg" alt="Image 4" style="width: 150px; height: 100px; object-fit: cover; margin: 5px;"> div>

Is it possible to be done?

[Vinitha Jeyakumar]

Hi Stefan,

You can dynamically modify the RichTextEditor's content using the value property like below,

Code snippet:

<ejs-richtexteditor id="defaultRTE" [value]="value"> </ejs-richtexteditor>

export class AppComponent {

  public value = 'RichTextEditor initial value';

  public BtnClick = (): void => {

    this.value = 'Modified value';

  };

}

Sample: https://stackblitz.com/edit/angular-emjbe7?file=src%2Fapp.component.html,src%2Fapp.component.ts

API Link: https://helpej2.syncfusion.com/angular/documentation/api/rich-text-editor/#value

Regards,

Vinitha

[Stefan Colic]

Hi  Vinitha,

Thank you on your quick response. I have one more question. When I upload images, event insert is activated before images are embedded in text editor content. Can you tell me on which event I should implement your previous answer so it can rearrange images in demanded order.

Best regards,

Stefan.

[Gokulraj Devarajan]

Hi Stefan,

We have validated your query on "Event to use on when the image gets inserted". We have been able to solve this challenge by using the "actionComplete" event which will be triggered after the image gets inserted into Rich Text Editor Component. Please find the attached code snippet, sample for your reference.

Code Reference:

  public actionComplete(args: ActionCompleteEventArgs) {

    if (args.requestType === 'Images') {

      if (args.elements[0].parentElement.childElementCount > 2) {

        const newElem: HTMLElement = document.createElement('div');

        newElem.style.display = 'flex';

        const parentNode = args.elements[0].parentElement;

        while (parentNode.firstChild) {

          newElem.appendChild(parentNode.firstChild);

        }

        parentNode.appendChild(newElem);

        console.log('Inmages Arranged');

      }

    }

  }

Sample: ​https://stackblitz.com/edit/angular-fw7ux3?file=src%2Fmain.ts

API: https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/#actioncomplete

Regards

Gokulraj Devarajan

[Stefan Colic]

Hi  Gokulraj,

I have tried your solution, but it looks like actionComplete function is not executed when I click on insert button. 

this is part of my actionComplete method, but in my case, when I click insert button this method is not executed. I saw it by logs. Can you please help me with that?

Best regards, Stefan.

[Vinothkumar Yuvaraj]

Hi Stefan,

We suspect that you have missed implementing the actionComplete event on the ejs-richtexteditor component. Please see the following code and sample for your reference.

In the following sample, we have implemented rearrangement only when three or more images are inserted into the Rich Text Editor using the actionComplete event.

 <ejs-richtexteditor id='defaultRTE' (actionComplete)='actionComplete($event)'>

 </ejs-richtexteditor>

public actionComplete(args: ActionCompleteEventArgs) {

    console.log("RTE");

    if (args.requestType === 'Images') {

      if (args.elements[0].parentElement.childElementCount > 2) {

        const newElem: HTMLElement = document.createElement('div');

        newElem.style.display = 'flex';

        const parentNode = args.elements[0].parentElement;

        while (parentNode.firstChild) {

          newElem.appendChild(parentNode.firstChild);

        }

        parentNode.appendChild(newElem);

        console.log('Images Arranged');

      }

    }

  }

Sample : https://stackblitz.com/edit/angular-fw7ux3-qhrjen?file=src%2Fapp.component.ts

If you are still facing an issue, can you please share the following information to replicate your problem at our end?

• Can you please share your exact code in your application, or can you please share the issue replicating sample?
• If possible, please modify the shared sample with the issue-replicating code.

Regards,

Vinothkumar

[Stefan Colic]

Hi Vinothkumar,

I am still facing with an issue. I have attached my code in the following sample: https://stackblitz.com/edit/angular-fw7ux3-8ha72j?file=src%2Fapp.component.html,src%2Fapp.component.ts

Can you please take a look and tell me what is wrong?

Best regards, Stefan.

[Vinothkumar Yuvaraj]

Hi Stefan,

Thanks for sharing the sample. We have achieved your requirements by using the FileReader 'load' event. In this event, we have wrapped the image into the DIV element, and then inserted that div element into the Rich Text Editor using the executeCommand method. Please take a look at the following code and the attached sample for your reference.

public dialogOpen(args) {

    (document.getElementsByClassName('e-uploader')[0] as any).name = 'photo';

    (

      document.getElementsByClassName('e-uploader')[0] as any

    ).ej2_instances[0].maxFileSize = 209715200;

 

    if (args.element.classList.contains('e-rte-img-dialog')) {

      (

        document.getElementsByClassName('e-uploader')[0] as any

      ).ej2_instances[0].multiple = true;

      (

        document.getElementsByClassName('e-uploader')[0] as any

      ).ej2_instances[0].selected = (args) => {

        this.data = args.filesData;

        document

          .getElementsByClassName('e-rte-elements e-flat e-insertImage')[0]

          .removeAttribute('disabled');

          var images =[] ;

        document

          .getElementsByClassName('e-rte-elements e-flat e-insertImage')[0]

          .addEventListener('click', () => {

            for (let i = 0; i < this.data.length; i++) {

              let file: File = this.data[i].rawFile;

              let fileUrl: string = '' + file.name;

              let reader: FileReader = new FileReader();

              reader.addEventListener(

                'load',

                () => {

                  var src1 = reader.result;

                  const newElem: HTMLElement = document.createElement('img');

                  newElem.setAttribute("src", reader.result.toString()) 

                  images.push(newElem)

                  if(this.data.length == images.length){

                    const newElement: HTMLElement = document.createElement('div');

                    newElement.style.display = 'flex';

                    var i = 0;

                    while (images.length > i) {

                      newElement.appendChild(images[i]);

                      i++;

                    }

                    this.rteObject.executeCommand('insertHTML',newElement)

                  }

                },

                true

              );

              reader.readAsDataURL(file);

            }

            this.rteObject.closeDialog(DialogType.InsertImage);

          });

      };

    }

  }

 

 

Sample : https://stackblitz.com/edit/angular-fw7ux3-tgrkqw?file=src%2Fapp.component.ts,src%2Fapp.component.html,src%2Fapp%2Fapp.module.ts

API Link : https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/#executecommand

Regards,

Vinothkumar

[Suriaprakash Chellappa]

How to insert a text to current cursor position from code?

Also when we concatenate the value from code removes the styling or concatenate to next line? How can we concatenate with affect styling and in same line?

[Suriaprakash Chellappa]

Ignore my request. Found a way to do that.

[Vinitha Jeyakumar]

Hi Suriaprakash Chellappa,

You are welcome.

Regards,

Vinitha