excuteCommand - insertImage

[sk]

I need programatically insert an image into rich text editor control. For some reason it gets added at the beginning of a line instead at the current

cursor position.

var el= document.createElement("img");

el.src = "some url.";

defaultRTE.executeCommand("insertImage",el);

Is there something I am missing, Thanks ahead for the help.

[Prince Oliver]

Hi Sampurnima, 

Thank you for contacting Syncfusion support. 

To insert image programmatically in RichTextEditor at the current cursor position, we suggest you use the executeCommand method and you can save the selection range before inserting the image. Kindly refer to the following code snippet. 

<script> 

    document.getElementById('btn').addEventListener('click', function () { 

        var el = document.createElement("img"); 

        el.src = "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/RTEImage-Feather.png"; 

        defaultRTE.focusIn(); 

        let selection = new NodeSelection(); 

        let range = selection.getRange(defaultRTE.contentModule.getDocument()); 

        selection.save(range, defaultRTE.contentModule.getDocument()); 

        defaultRTE.executeCommand("insertImage", el); 

    }); 

</script> 

We have prepared sample based on your requirement, using button click insert the image. Kindly refer to the following link for the sample: https://stackblitz.com/edit/2vbdgy-yrrqfg 

Please let us know if you need any further assistance on this. 

Regards, 

Prince 

[sk]

Prince

Everything looks good, but my environment is pure Javascript, not Typescript. 

I am getting following error message. 

Uncaught ReferenceError: NodeSelection is not defined

Is there a work around. Thanks for all the help, Syncfusion support is awesome

[Prince Oliver]

Hi Sampurnima,  

 

Thank you for your update. 

 

We have updated the code using JavaScript as per your requirement. You can access the NodeSelection from the ej.richtexteditor object. Kindly refer to the following code snippet. 

 

<script> 

    document.getElementById('btn').addEventListener('click', function () { 

        var el = document.createElement("img"); 

        el.src = "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/RTEImage-Feather.png"; 

        defaultRTE.focusIn(); 

        var selection = new ej.richtexteditor.NodeSelection(); 

        var range = selection.getRange(defaultRTE.contentModule.getDocument()); 

        selection.save(range, defaultRTE.contentModule.getDocument()); 

        defaultRTE.executeCommand("insertImage", el); 

    }); 

</script> 

 

We have attached a modified sample for your reference, please find the sample at the following location: https://stackblitz.com/edit/7bfcsb  

 

Please let us know if you need any further assistance on this.  

 

Regards,  

Prince  

[sk]

it works in the sample you provided,  but when I tried same code in  my app it still inserts at the beginning of the page. I have a menu from which I invoke a dialog to capture URL of the image. After user presses an insert button in the dialog I invoke insert image code with  with the user supplied URL. For some reason Rich text editor gets lost when I popup a dialog from menu to capture image URL. 

Any ideas how I can solve the problem

The crg generated richtexteditor gives

invalid new ej.richtexteditor.NodeSelection(); 

To avoid this bug I linked to the entire library

Thanks for all the help.

[Prince Oliver]

Hi Sampurnima, 

Thank you for your update. 

We checked your reported scenario. The cause of the problem in the CRG downloaded script cannot access the instance of the selection. We have provided another way to get the selection from RichTextEditor instance. Kindly refer to the following code snippet. 

document.getElementById('btn').addEventListener('click', function () { 

    var el = document.createElement("img"); 

    el.src = "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/RTEImage-Feather.png"; 

    defaultRTE.focusIn(); 

    var selection = defaultRTE.formatter.editorManager.nodeSelection; 

    var range = selection.getRange(defaultRTE.contentModule.getDocument()); 

    selection.save(range, defaultRTE.contentModule.getDocument()); 

    defaultRTE.executeCommand("insertImage", el); 

}); 

Sample Link: https://stackblitz.com/edit/7bfcsb-nzhfic  

Please let us know if you need any further assistance on this. 

Regards, 

Prince 

[sk]

The code still puts the image at the beginning of the document instead where the cursor ws.

How to reproduce

Run the Sample Link: https://stackblitz.com/edit/7bfcsb-nzhfic  

Step 1. Click between words some where in the middle of the sentence.

Step 2: Click the cursor outside the rich text editor ( any white space area outside the rich text editor)  to remove focus from the rich text editor.

Step 3: Now click  on the insert image button.

You will see the image inserted at the beginning of the page, not where last location where you were cursor was positioned.

Thanks for the help

[Christopher Issac Sunder K]

Hi Sampurnima,  

Thanks for the update. 

To insert the image in the cursor position, you can save the selection range in the blur event and restore the selection before inserting the image. Please find the code snippet and sample for your reference. 

var selection; 

var defaultRTE = new ej.richtexteditor.RichTextEditor({ 

    blur: function () { 

        selection = defaultRTE.formatter.editorManager.nodeSelection; 

        var range = selection.getRange(defaultRTE.contentModule.getDocument()); 

        selection.save(range, defaultRTE.contentModule.getDocument()); 

    } 

}); 

defaultRTE.appendTo("#defaultRTE"); 

document.getElementById('btn').addEventListener('click', function () { 

    var el = document.createElement("img"); 

    el.src = "https://ej2.syncfusion.com/demos/src/rich-text-editor/images/RTEImage-Feather.png"; 

    selection.restore(); 

    defaultRTE.executeCommand("insertImage", el); 

}); 

 

Sample Link: https://stackblitz.com/edit/7bfcsb-ps7cni?file=index.js 

Please check it and let us know if you are facing any issues still. 

Thanks,
Christo