Open Bug 570139 Opened 11 years ago Updated 6 years ago

document.execCommand insertImage adds image to page, not to editable div

Categories

(Core :: DOM: Editor, defect)

x86
Windows 7
defect
Not set
normal

Tracking

()

UNCONFIRMED

People

(Reporter: hippoage, Unassigned)

Details

(Keywords: testcase)

Attachments

(1 file)

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.1; ru; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.1; ru; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3

Simle form: subject (input type="text"), hidden textarea, div with contenteditable="true", image button to insert image to editable div.

If focus in the div all works good, but if focus in the subject field than image and subject field clone added near subject field.

Other browsers (ie, opera, safari, chrome) works ok.

Workarounds:
1) I'm tried document.activeElement as workaround, but it points to button.
2) document.getElementById('body2').focus() helps, but it brokes Opera (always in the end) and Chrome (all content replaced to image). What is the correct way to target javascript to Firefox 3?

Reproducible: Always

Steps to Reproduce:
1. Click in the subject field
2. Click on image button to add image to div

Actual Results:  
Image and doublicated text field added to page near subject field.

Expected Results:  
Any of this:

Opera:
image added to the end of the div

IE:
image added to the beginning of the div

Safari, Chrome:
nothing happens

Test case html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>insertImage error</title>

        <script type="text/javascript">
            function addImage(){
                var image= "someImage2.png";
                if (document.selection) {//for ie
                    document.getElementById('body2').focus();
                    document.execCommand('insertImage',false,image);
                } else {
                    document.execCommand('insertImage',false,image);
                }
                return false;
            }
        </script>
    </head>
    <body>
        <form action="#">
            <dl>
                <dt>Subject:</dt>
                <dd>
                    <input name="subject" type="text" />
                </dd>
            </dl>
            <dl>
                <dt>Body:</dt>
                <dd>
                    <textarea id="body" name="body" style="display: none;" cols="80" rows="5"></textarea>
                    <div id="body2" style="border: 1px solid black" contenteditable="true"><p><br/></p></div>
                    <div class="buttons">
                        <input src="someImage.png" onclick='return addImage()' type="image" />
                    </div>
                </dd>
            </dl>
        </form>
    </body>
</html>
Attached file testcase
Keywords: testcase
You need to log in before you can comment on or make changes to this bug.