When I insert an image the WebHtmlEditor puts the full path into the markup. This is an issue because I am developing on my PC, it will then move to a development server for testing, and then it will move again to the production server - all of which have different base URLs but the same folder structure. How do I tell the editor not to paste in the full path - only the relative path from the site root?
I am using 7.1.20071.40 - would a newer version work better?
Here is my current code:
edExplanation.UploadedFilesDirectory = "~/UploadedFiles";
Here is the code, partially given to me by Infragistics support, that creates a client side script for the AfterAction event. Using this you can determine if the action was an image insert and adjust the rendered html accordingly to remove the base of the url from the string to make the image path relative.
string afterActionEventScript = @"function edAfterAction(oEditor, actID, oEvent, p4, p5, p6, p7, p8){if (actID == 'InsertImage') {var txt = oEditor.getText();var homeURL = this.location.protocol + '//' + this.location.host + '" + Request.ApplicationPath + @"/';txt = txt.replace(homeURL, '');oEditor.setText(txt);} }";if (!Page.ClientScript.IsClientScriptBlockRegistered("edAfterAction")) {Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "edAfterAction", afterActionEventScript, true); } edExplanation.ClientSideEvents.AfterAction = "edAfterAction";
string afterActionEventScript = @"function edAfterAction(oEditor, actID, oEvent, p4, p5, p6, p7, p8){
}";
{
}
edExplanation.ClientSideEvents.AfterAction = "edAfterAction";
You can also handle other events, such as paste. NOTE: the "Paste" action only occurs when someone clicks the right-click menu or one of the standard menu buttons on the WebHtmlEditor - NOT on "ctrl-v". ie: (JavaScript, inside edAfterAction)
if (actID == 'Paste') { alert('you just pasted something'); }
I don't completely understand what this is doing.
var homeURL = this.location.protocol + '//' + this.location.host + '" + Request.ApplicationPath + @"/';
I have a content management system. I want the images to be uploaded to say c:/inetpub/wwwroow/app1 but I am running from c:/inetpub/wwwroow/app2. I don't really care if it hardcodes the path of the image instead of a relative path, but right now if course it's putting the directory of where I got the image from on MY computer. What is the best way to make it UPLOAD the pic to the location on the server and also change it from MY path to that path.
The code you included above setting the homeURL is in the client-side JavaScript. You need to set the UploadedFilesDirectory property on the editor in the codebehind (C# / VB.NET) to the directory that you want to save the files in. That directory needs to have certain permissions (write) set on it. Here's an example:
myEditor.UploadedFilesDirectory = "c:/inetpub/wwwroow/app1/UploadedFiles";
How do you have App2 getting files from App1 - Do you have a virtual directory in App2 pointing to the physical directory in App1? In any case, you may need to change the img tags path inside of the editor so when the html is rendered it points to the correct place. That's what the above code will help you do.
Issue #3, do you know why there is no browse button? I'm afraid my users won't be able to get the path and paste that in there then paste in the file name.
Sorry, I meant once I had the insert image popup open. I have to know the path of my image because there is no browse to image button.
Ok just thought you had it worked out. I went that route. Thanks for your help.
There is a little image button for inserting. When you hover over it it says "Insert Image". This button will pop up a window called "Modify Image" which has a upload an image section with a browse button like your asking for. Do you have the Insert Image button in the Editor's toolbar? You can use the designer to add this button.
Did you try chatting with Infragistics tech support? They are pretty fast and are usually pretty helpful.