PD editor insert-image

This tutorial will show you how to add an insert image and pre-view function to your PD html editor.

The button 'Add':

This button will actually add the html image tag with the source path to the editor.

This button holds the OnClick event called 'createImage'.

The function is shown below and needs be inserted into the existing HTML editor script that is below the textarea brackets ( <textarea name="EditorValue" style="display: none;"></textarea> ):

function createImage(){

sImage = document.all.prefix.value + document.all.imagebank.value;
doFormat('InsertImage',sImage);
}

A good place to insert it, would be below the function 'makeUrl'.

What does this do ?

It takes the value of the hiddenfield (path) and the value of the dynamic menu (filename) and creates a image tag.

The new browser window:

This is needed to pre-view the selected image in the menu.

We load this window when the HTML editor page loads.

var display_window = window.open('url of the pre-view page','display_window','resizable=yes,height=200,width=200');
display_window.window.focus();

Place this javascript in the head of your HTML editor page.

Create a new page for the pre-view browser window and just add the following (don't forget the name of the tag !):

We need the name of tag for the pre-view function.

Notice that the source (http://www.domein.com/Images/startup.jpg) consists of our earlier defined hidden field 'prefix' and the menu 'imagebank'

Marcellino Bommezijn

Marcellino Bommezijn is one of the managers at dmxzone.com. He is a contributor on the tutorials section.

Owner of Senzes Media (http://www.activecontent.nl) which provides professional services and web applications for mid-sized companies.

ActiveContent CMS is the ASP.NET Content Management solution that is used for building professional and rich-featured websites.

See All Postings From Marcellino Bommezijn >>

Comments

Thanks

November 27, 2001 by Berry van Elk

Thanks for this tutorial, i try'd a lot of things but nothing worked. This tutorial is just perfect.

Align Image?

January 14, 2002 by David Martin

I've used your method to add images...Thanks for the help. How would I go about enhancing this to be able to insert the align="left" or "right" tag? The same goes for adding a border around the image.

RE: Align Image?

February 26, 2002 by heinz leo

thats a big question!
do you have a answer now?

Style sheets?

March 1, 2002 by Damien Aviles

i have a style sheet on my site, i would like to keep the style sheet font and size. pd edit won't let me do that. can i have it so that the default font is the style sheet?

See all 12 Comments

You must me logged in to write a comment.