How do I justify an image without using "document.execCommand(justifyleft);"

I have a rich text area where users should be able to edit their websites. I have a function to input an image and others to alter that image. One of the other functions should align the image to the right left or center (three functions really) but I am struggling to do this.

The reason I cannot just do this simply using the "document.execCommand(justifyleft);" is because i have used this command for the alignment of the text. If I use the same function then the button for the alignmet of the text is indented as the id seems to have to be the same as the command.

I hope this makes sense.

Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

James RodgersWeb Applications DeveloperCommented:
what about using the style of the image

<img src="" ...  style="align:left">
<img src="" ...  style="align:right">
<img src="" id="someImageId" ...  style="align:center">

and write the tag dynamically"left";
You can put it in a <div>

<div id="images" align="center">Images goes Here</div>

You can change the align dynamically using...
document.all.images.align = "left"; // or right or center

Hope this helps...

use jester's idea.  pass either the reference to the image you want to align or the id of the image (which will require you to add setting the id in the image creation/edit function) and use his method to set the alignment of the image.

the one thing is that "align" is not one of the supported style attributes.  you can use .styleFloat and use left, right, none.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

wjdashwoodAuthor Commented:
That sounds like a good answer. But how would I go about setting the id when i insert the image? Also when I align the image in this way will the text wrap around the image? I don't want the image to split the text.

how are you inserting the image?

just wondering if you're using .createElement and appending it or if you're setting the innerHTML or something along that line.
wjdashwoodAuthor Commented:
the user will select an image from the list. The actual code editor.document.execCommand('insertimage', false, image);
is the inserting of the image. If another way is easier then I can change the way it is done.
assuming that you're working with just a very simple wysiwyg editor as well as working in just IE, the following link leads you to a working example
(sorry about it being in french)

it's very simple to follow and will do most of what it seems you're asking for.

if you're working with pulling in values, you can create a javascript function that will load the initial value into your textarea.
wjdashwoodAuthor Commented:
i have examples of the inserting the image but I wanted to know how i give the image an id, which seems to be needed for the alligning. I can get the image inserted though I will be creating my own customised version which is a lot simpler, this is why the method of input can be changed to aid the adding of the id.

the document.execCommand() does not seem to insert an id for the image (at least no one that i'm seeing), so it doesn't seem that

if you change document.execCommand('insertimage', false) to document.execCommand('insertimage', true), there will be a user interface that pops up that will allow them to choose the image that they want as well as the different tools for alignment, etc.

setting the user interface (the second argument) to true allows them to click on the image then select the icon you have for editing/adding an image and be brought back to that same interface.

the disadvantage to this is the whole pathing issue.  it seems to write out the path for the image as it pertains to the fso on the machine that is editing the file.
wjdashwoodAuthor Commented:
I'm not exactly sure I understood all of that.
By making the second argument false I am able to use my own interface to insert the image. I have to do this as the default interface does not do enough and is over complicated. Can I not use my own interface to assign the id to the image. If I can, do you know how?

As for your last paragraph, i'm completely lost

the last paragraph was a poor attempt to try and think outloud about how setting the second parameter to true seems to pass the local file path in as the image source, which would obviously be a problem.

ok, working with your own interface, here you go:

<script language=javascript>
var myPage = window.opener;

var imageWidth;
var imageHeight;
var imageAlign;
var imageBorder;
var imageAltTag;
var imageHspace;
var imageVspace;
var imageSrc;
var imageBorderColor;

      imageWidth = myPage.selectedImage.width;
      imageHeight = myPage.selectedImage.height;
      imageAlign = myPage.selectedImage.align;
      imageBorder = myPage.selectedImage.border;
      imageAltTag = myPage.selectedImage.alt;
      imageHspace = myPage.selectedImage.hspace;
      imageVspace = myPage.selectedImage.vspace;
      imageSrc = myPage.selectedImage.src;
      imageBorderColor =;
      imageWidth = ''
      imageHeight = ''
      imageAlign = ''
      imageBorder = ''
      imageAltTag = ''
      imageHspace = ''
      imageVspace = ''
      imageSrc = ''
      imageBorderColor = ''

window.onload = function Load()

function setValues()
      document.imageForm.image_width.value = imageWidth;
      document.imageForm.image_height.value = imageHeight;
      if (imageBorder == "")
            imageBorder = "0"
      document.imageForm.image_border.value = imageBorder;
      document.imageForm.alt_tag.value = imageAltTag;
      document.imageForm.image_hspace.value = imageHspace;
      document.imageForm.image_vspace.value = imageVspace;
      document.imageForm.img_Src.value = imageSrc;

where imageForm is the form on your page and the form fields are image_width, image_height, image_border, alt_tag, image_hspace, image_vspace, image_src
wjdashwoodAuthor Commented:
could you give a short description of what this does please?
As i try to follow it I get that there is a selected image in the parent window, the properties of this are copied into the variables. Then what happens, what and where is the form?

Sorry, but i'm quite new to javascript so I struggle to understand it sometimes.


the first part you have correct, it is a test to see if an image has been selected, otherwise default values are set for the different properties of an image (such as hspace, vspace, alt, src, etc.

window.onload = function Load()


is the same thing as putting

<body name="MyBody" id="MyBody" onload="Load()">

i've just gotten used to setting the load like that in js that i don't put it on the body any more.

basically, the setValues() function is assuming that you have a form that you are using to get the information from the user, something like (written out in divs for shorthand purposes):
<form name="imageForm" id="imageForm" method="post">
    <div>Image Source:<input type="text" name="img_src" id="img_src" value="" /></div>
    <div>Image alt:<input type="text" name="alt_tag" id="alt_tag" value="" /></div>
    <div>Image hspace:<input type="text" name="image_hspace" id="image_hspace" value="" /></div>
    <div>Image vspace:<input type="text" name="image_vspace" id="image_vspace" value="" /></div>
    <div>Image border:<input type="text" name="image_border" id="image_border" value="" /></div>
    <div>Image height:<input type="text" name="image_height" id="image_height" value="" /></div>
    <div>Image width:<input type="text" name="image_width" id="image_width" value="" /></div>

you access the Image Source text input in java script with the syntax document.imageForm.img_src.value, etc.  you could use document.getElementById('img_src') as well (especially considering you're not going to be worried about nn 4.x or IE browsers that don't support document.getElementById() with what you're trying to do).

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.