8
votes

Comment obtenir l'élément d'image après insérer à l'aide d'ExecCommand?

Y a-t-il un moyen d'obtenir l'élément d'image après avoir inséré l'image à l'aide d'ExecCommand? Par exemple xxx


0 commentaires

3 Réponses :


6
votes

Vous pouvez utiliser le fait que les navigateurs placent le caret immédiatement après l'image insérée et y revenant de là. Ce qui suit nécessite une gamme DOM et une prise en charge de la sélection, qui règne, à savoir, c'est-à-dire <= 8, mais si cela est important, vous pouvez utiliser une bibliothèque telle que ma propre Rangy pour remplir cet écart.

Demo: http: // jsfiddle. net / xjkuj /

code: xxx


3 commentaires

Bonne réponse, mais y a-t-il une solution plus simple?


@Abforce: Pas que je puisse penser. L'appel exécuteur () ne renvoie rien aussi pratique comme une référence à l'image insérée, vous devez donc faire une traversée DOM.


@Abforce: Je pense que la réponse de Kernel James est meilleure.



11
votes

n'utilise pas insertionImage code>, utilisez un ancien INSERTHTML CODE> et donnez l'élément que vous insérez un identifiant afin que vous puissiez y réfrir ultérieurement. I.e.,

function insertHTML(img) {
  var id = "rand" + Math.random();
  var doc = document.getElementById("editor");
  doc = doc.document ? doc.document : doc.contentWindow.document;
  img = "<img src='" + img + "' id=" + id + ">";

  if(document.all) {
    var range = doc.selection.createRange();
    range.pasteHTML(img);
    range.collapse(false);
    range.select();
  } else {
    doc.execCommand("insertHTML", false, img);
  }
  return doc.getElementById(id);
};


5 commentaires

Bonne suggestion, même si je devrais éviter d'utiliser document.all .


Mais cela fonctionnera-t-il dans IE? La documentation pour Execcommand dit, INSERTHTML ne fonctionne pas dans IE.


Le problème avec cette technique est que l'utilisateur devra sélectionner une partie du texte avant INSERTHTML peut être exécuté ...


Cette solution est vulnérable à XSS


@Alvaromontoro, pouvez-vous expliquer comment il est vulnérable à XSS?



3
votes

Ceci est mon chemin:

e.execCommand('insertimage', 0, URI) // image's URI
image=$('img[src="'+URI+'"]').not('.handled').addClass('.handled');

//.not('.handled').addClass('.handled') is needed if there are many images with the same URI


0 commentaires