Javascript Absolute vs. Relative URI using .execCommand('insertHTM L', false, html);

Question

Hello all,

I've been using a rteEditor very sucefully until now.

The problem is in this line of code:

document.getElementById(rteName).contentWindow.document.execCommand('insertHTML', false, html);

I'm passing an ABSOLUTE path to the html var such as ("http://www.url.com/file.html").

But when it execute this insert command the output is ("../file.html");

Its possible to use a jQuery command instead?

Any Suggestions?

Answer 1

Have you tried using 'insertImage' instead of 'insertHTML'?

Edit: 'insertImage' just takes the url of the image and creates an img tag based on that.
You can get the image after inserting it with jQuery like this:

 var img = $("img[src='imgUrl']");

with 'imgUrl' being the url of the image you add, and then add the needed attributes to that.

An example without using jQuery is here at line 123.

Answer 2

In my experience, working with native rich text editors (aka div's with contentEditable="true" or iframes with designMode set to on) is very difficult. The API is inconsistent across browsers and their behavior is often unexpected and buggy. Because of this I tend to use document.execCommand() as little as possible. Instead I tend to reply on direct DOM manipulation.

With that in mind, here's how I'd try to solve the problem you described:

• Create the an in-memory image element and set the appropriate url.
• Find the DOM node that contains user's cursor.
• Insert the in-memory image element into the DOM node found in the previous step.

The code needed to implement the second step is somewhat tricky and varies hugely across browsers. I'll try to post a working example in the next day or two. I hope this helps in the mean time.

Answer 3

As far as I understand, and have experienced it myself, this is 1. inherent to the browser's HTML editing engine and 2. it happens only when the image that you are trying to insert, and the address you are running the HTML editor from are on the same domain.

As a solution, if your server/provider allows this, you could set up a second subdomain that points to www, for example

www2.example.com

and link to the image as

http://www2.example.com

this should have the result that the absolute link remains untouched.

upon saving the HTML, you just have to replace all occurrences of www2.example.com to www.example.com.

Another, maybe simpler, way would be to run the WYSIWYG editor on www2.example.com and inserting the proper absolute URLs.

Answer 4

I think because of security reasons, you can not specify complete url such as www.example.com.

Answer 5

I believe that you should be able to use jQuery.

You will probably want to use something along the lines of

$(rteName).find('body').html('<img src="http://www.example.com/" alt="...">

but probably with some changes to the selector(s).