Javascript Examples :: View topic

starrwriter · 16 Apr 2004

I'm using IE's design mode for a WYSIWYG editor I'm assembling. The execCommand dialog for insert image places the absolute file path in the HTML for images. This has to be manually deleted before uploading the saved page to the web host, which isn't at all WYSIWYG.

I've been looking for a script for weeks to eliminate the file path from the image src tag, but I can't find anything that works client-side. I understand why it's necessary for an editor to use the file path to display an inserted image on the page under construction, but other WYSIWYG editors eliminate the path if the page is saved in the same folder/directory as the image. How is this done?

Acid · 06 Jun 2002

how are you designing the editor?

maybe they do something like, if the img path has the same path as the path for the currently poened file, then only use the name of the file, else use the whole path.

document.getElementById('imgname').src=""
is JS for clearing its source attribute, but I doubt you want that.

starrwriter · 16 Apr 2004

Acid wrote:

how are you designing the editor?

maybe they do something like, if the img path has the same path as the path for the currently poened file, then only use the name of the file, else use the whole path.

document.getElementById('imgname').src=""
is JS for clearing its source attribute, but I doubt you want that.

I'm designing the editor by using Microsoft's execCommands that work in IE 5+ for operations like bold, indent, align, insert image, etc. applied to an iframe that serves as a WYSIWYG editing window. Buttons execute the commands and the user types in/inserts content.

Basically, I have to find a script that over-rides the default behavior of Microsoft's insert image dialog to use a file path in the img src tag. I'll try your script.

Acid · 06 Jun 2002

have you got it working?

if not, could you also explain what you're trying to do in more detail, maybe showing us some code.

starrwriter · 16 Apr 2004

Acid wrote:

have you got it working?

if not, could you also explain what you're trying to do in more detail, maybe showing us some code.

It's working except for glitches in inserting absolute file paths for images and relative links. I got the information on how to program the editor from a Microsoft's forum and a couple online tutorials about building your own WYSIWYG editor. The application is WAY too long to post here and I don't have it on a website yet.

All I need to finish it is a script to eliminate absolute file paths from the HTML source code either when the image or link is inserted or when the page under construction is saved. I know this is possible because most WYSIWYG editors do it.

Here are the functions involved in the absolute path problem:

function doLink()
{
iView.document.execCommand('createlink');
}

function insertImage() {
iView.focus();
iView.document.execCommand('insertimage', true, null);
}

(The true setting calls the IE modal dialog which automatically uses file path in the image tag)

function saveFrame() {
var title = prompt("ENTER PAGE TITLE","My Page");
var html = iView.document.documentElement.outerHTML;
var html_txt = "<html><head><title>" + title + "</title></head>\n";
html_txt += html + "\n</body></html>";
iView.document.write(html_txt);
iView.document.execCommand('SaveAs',null,'index for homepage');
}