Ticket T1285704

Only Visible to You and DevExpress Support

Visible to All Users

Modify support ticket and change its visibility

Urgent Duplicate

Using MVC extensions RichEdit. Want to update image source on client side in JavaScript

D D

David David

created 7 days ago (modified 7 days ago)

We are using MVC Extensions. We are using your Rich Text Editor (RichEdit).

We have been searching your website and could not find out how to change an image source in JavaScript. On the client side, in JavaScript, we would like to change the image source, like changing it to a new base64 value. If you could tell us how to get the "Shapes" collection in JavaScript. Then, we can check the Alt Text field to match the name of our shape (image). That way, we can find the image in JS. Then, we would like to change the source of the image, preferably using a base64 string, but another approach in JavaScript (client side) would be fine. Could you please give us the code or tell us how to do this?

Thank you

David

Show previous comments (0) Comments (0)

Answers approved by DevExpress Support

A A

Abai (DevExpress Support) Abai (DevExpress Support)

created 7 days ago (modified 7 days ago)

Hi David,

Unfortunately, our MVC RichEdit does not have client-side API for this task. As a workaround, we can only recommend you modify the document on the server. To do this, send a callback to RichEdit. Inside RichEdit's CustomActionRouteValues action, you can load RichEdit's document into our non-visual RichEditDocumentServer component. We demonstrated this technique in the following public ticket: RichEdit - How to replace Tag or specific words in an existing Word Document. In your case, you can use the Document.Images property to access the image collection and modify it based on your requirements.

Let me know if you need further assistance.

Show previous comments (2) Comments (5)

D D

Private David Private David 6 days ago

Hello Abai,

Thank you for the prompt response.

It is regretful for us that you don't have a client-side API to update an image source. We are not able to update the image source on the server side because the document version on the server side is out of date. The document is rendered and sent to the client side and shown by your Rich Text Edit control. Then the user adds content to the document using your Rich Text Edit. Then the image is updated. This is all done before the user saves the document. The document has been changed from what is on the server. So, we cannot use the version on the server. It is out of date.

We have an idea of how to solve this problem.

The attached screen capture shows the bottom part of a Word docx file that is loaded into your Rich Text Edit tool. The box around the image with the word "Monitor" is an image that we want to replace with a different image source. All we need is the HTML DOM ID field for that image. Then, we can update it with JavaScript. How do you assign the ID for that image tag? It probably comes from something from Word in the docx file. Once we know the image ID value, we can change the image source ourselves. Another possibility is the ALT field in the image tag. Do you assign the ALT field according to ALT text in the Word document image field?

Please tell us how you assign the ID field for your image tags.

Thank you.

David

Clipboard-File-1.png

A A

Private Abai (DevExpress Support) Private Abai (DevExpress Support) 4 days ago

Hi,

We are not able to update the image source on the server side because the document version on the server side is out of date. The document is rendered and sent to the client side and shown by your Rich Text Edit control. Then the user adds content to the document using your Rich Text Edit. Then the image is updated. This is all done before the user saves the document. The document has been changed from what is on the server. So, we cannot use the version on the server. It is out of date.

As the document is edited, RichEdit automatically synchronizes its client-side state with the server through requests. Document changes are persisted in a document model stored in server memory. As such, if you make some changes to the document, and then invoke a custom callback, you will be able to obtain the updated document (by calling RichEdit's RichEditExtension.SaveCopy method) in RichEdit's CustomActionRouteValues action. Therefore, the solution that I described in my answer should still be suitable in this case.

The attached screen capture shows the bottom part of a Word docx file that is loaded into your Rich Text Edit tool. The box around the image with the word "Monitor" is an image that we want to replace with a different image source. All we need is the HTML DOM ID field for that image. Then, we can update it with JavaScript. How do you assign the ID for that image tag? It probably comes from something from Word in the docx file. Once we know the image ID value, we can change the image source ourselves. Another possibility is the ALT field in the image tag. Do you assign the ALT field according to ALT text in the Word document image field?

Please tell us how you assign the ID field for your image tags.

IMG elements displayed in RichEdit are not assigned an ID value. Additionally, RichEdit does not support the AltText feature. Also, note that even if the src of some IMG element within RichEdit is manually changed with JS, this change will not be persisted / saved to the document model.

Please let me know if the original solution (sending a custom callback to RichEdit and modifying the document via RichEditDocumentServer) meets your requirements. If not, could you please elaborate on your end goal, e.g., when (in response to what user action) and how exactly you wish to modify the image? It will also help if you can share a sample document to better illustrate your use case. This will help us determine if an alternative workaround for this task exists.

D D

Private David Private David 3 days ago

Hello,

Thank you for your help.

I am working on your approach to updating the image source on the server side.
I followed the instructions in the links you sent and other that I found.
When the call back returns the PartialView, instead of the Rich Edit view being updated, I get an alert message.
You can see this in the screen capture. I did not put this alert statement in the code as far as I can tell.
Part of the alert message is some html code before the Rich Edit control.
I am including the following files:

_RichEditPartial.cshtml - This has the "@Html.DevExpress().RichEdit" construction.
_HearingsPartial.cshtml - This has the grid that calls _RichEditPartial.cshtml.

In the JavaScript section, the method: OnRichEditCustomCommandExecuted() is called when the process starts.
This is called by a button we added to Rich Edit. The method StartSigning() is called.
You can see the RichEditTmplt.PerformCallback() commented out. I was using that, but it gave the same alert message.
Based upon some other links, then I tried making an invisible DevExpress button, "RichEditServerSync".
The button is in this file. Also, the JQuery to click it is there also. That did not solve the problem.
I tried a third approach which I saw in another developer's code. It goes like this:
var controlName = "RichEditTmplt";
var ret = ASPxClientControl.GetControlCollection().GetByName(controlName);
It also gave the alert message, without updating the Rich Edit view.

EventController.cs - It's big, but there is only a small part to look at.
The callback method is: RichEditDocReq(string mzi, string childId, string base64str)
I have stepped through this code and it does exactly what I want, which is to replace an image.

Can you please look at these files and screen capture?
The only problem I am having is that the Rich Edit is not being updated. Rather, an alert message is given.
That is the only area I need help with.

Please see the email for the files. I would not attach here.

Regards,

David

D D

Private David Private David 3 days ago

Hello,

You don’t have to answer the question below. I just figured it out.
I will let you know if I have any other questions. Or, I will close the ticket.

Thanks,
David

A A

Private Abai (DevExpress Support) Private Abai (DevExpress Support) 3 days ago

Hello,

Thank you for the update. I am happy to hear that the issue is resolved.

Created: April 3, 2025 11:15 PM

Modified: April 8, 2025 7:47 AM

Platform: ASP.NET MVC

Product: MVC RichEdit

Build: 24.1.4

Operating System: Windows 11

IDE: Microsoft Visual Studio 2022

Related Tickets

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Using MVC extensions RichEdit. Want to update image source on client side in JavaScript

Answers approved by DevExpress Support

Recently viewed tickets