We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

excuteCommand - insertImage

Thread ID:

Created:

Updated:

Platform:

Replies:

142364 Jan 30,2019 02:22 AM UTC Feb 8,2019 10:10 AM UTC JavaScript - EJ 2 7
loading
Tags: RichTextEditor
sampurnima kovi
Asked On January 30, 2019 02:22 AM UTC

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 [Syncfusion]
Replied On January 30, 2019 11:02 AM UTC

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 


sampurnima kovi
Replied On January 30, 2019 04:41 PM UTC

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 [Syncfusion]
Replied On January 31, 2019 08:41 AM UTC

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  


sampurnima kovi
Replied On January 31, 2019 08:29 PM UTC

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 [Syncfusion]
Replied On February 1, 2019 05:54 PM UTC

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); 
}); 


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

Regards, 
Prince 


sampurnima kovi
Replied On February 7, 2019 11:34 PM UTC


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

How to reproduce


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 [Syncfusion]
Replied On February 8, 2019 10:10 AM UTC

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); 
}); 
 


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

Thanks,
Christo
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;