0

まず、html に画像が存在するようにします。dblclick イベントを追加して、windown.onload のクラスをトグルすると、問題なく動作します。

//html

<button onclick="insertImageImageFromLink('../pic02.png')" >
 Add New Image
</button>
<div contenteditable="true">
<img src="../pic01.png" />
</div>

//css

button{
    width: 100px;
    height: 50px;
}
img {
border:5px solid white;
}
.ontap-2{border-color:green;}

//JavaScript

function toggleClass(elem, name) {
    if (elem.className.indexOf(name) < 0) {
        elem.className += ' '+name;
    } else {
        elem.className = elem.className.split(name).join('');
    }
}

function clearSelection() {
    var selection =
        window.getSelection ? window.getSelection() :
        document.getSelection ? document.getSelection() :
        document.selection;

    if (selection && selection.removeAllRanges) {
        // W3C-style
        selection.removeAllRanges();

    } else if (selection && selection.empty) {
        // IE-style
        selection.empty();
    }
}

function setupEventForAnImage(image) {
    image.ondblclick=function(){
    toggleClass(image,'ontap-2');
    clearSelection();
    };
}
function prepareEventHandlers() {      
   var imageArray = document.getElementsByTagName('img');
  for (var i = 0; i < imageArray.length; i++) {
    var image = document.getElementsByTagName('img')[i];
    setupEventForAnImage(image);
    }
}

window.onload = function() {
    // prep anything we need to
    prepareEventHandlers();
};

ここで、ボタンから contenteditable div に画像を追加する必要があります

<button onclick="insertImageImageFromLink('../pic02.png')" >

function insertNodeAtCursor(node) {
    var range, html;
    if (window.getSelection && window.getSelection().getRangeAt) {
        range = window.getSelection().getRangeAt(0);
        range.insertNode(node);
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        html = (node.nodeType == 3) ? node.data : node.outerHTML;
        range.pasteHTML(html);
    }
}

function insertImageImageFromLink(imageLink){
    var imge = new Image();
    imge.src = imageLink;
    insertNodeAtCursor(imge);
    setupEventForAnImage(image);
}

私のブラウザでは画像を挿入できますが、setupEventForAnImage(image); このコードのような もの: http://jsfiddle.net/DSa7a/4/しかし、機能挿入画像は私のブラウザでのみ機能し、このリンクでは機能しません。

リンクから挿入する場合、画像にイベントを追加する方法は?

助けてください！ありがとう！

4

1 に答える 1

2

このFiddleを確認してください。イベントは順調に進んでいるようです。

元のコードにタイプミスがあるようです。insertImageImageFromLink関数では、それは

setupEventForAnImage(imge);

それ以外の

setupEventForAnImage(image);

于 2013-08-26T08:11:01.220 に答える