Insérer du texte en Javascript contenteditable div

J'ai un problème lorsque j'ai besoin d'insérer un texte (chaîne de caractères, qui peuvent ou non avoir des balises html) dans un div. Il doit être un div et pas un textarea.

Est-il de toute façon? Tout d'abord, j'ai besoin d'obtenir la position du curseur, puis en insérant le texte dans cette position.

Il est similaire à la fonction insertAdjacentText, mais il ne peut insérer avant ou après une balise, et ne fonctionne que sous IE.

Reportez-vous à cette URL: http://yart.com.au/test/iframe.aspx. Notez comment vous pouvez positionner le curseur dans le div, nous avons besoin d'ajouter du texte à l'emplacement du curseur.

OriginalL'auteur Restless Wanderer | 2008-10-30

  1. 11

    Si tout ce que vous devez faire est d'insérer du code HTML à la sélection en cours /point d'insertion, c'est faisable. Sur le dessus de ma tête (pour commencer):

    Dans IE, utilisez document.sélection.createRange().pasteHTML(theNewHTML).

    Dans d'autres navigateurs, vous devriez être en mesure d'utiliser document.execCommand("InsertHTML", ...).

    J'ai utilisé ces types de techniques que dans modifiables iframes/documents, pas divs, mais ces appels devraient travailler que si la div est concentré, je crois.

    Comme une autre réponse averti, il devient laid si vous voulez un contrôle plus précis, comme l'insertion de texte dans d'autres endroits.

    OriginalL'auteur

  2. 7

    La Plage et de la Sélection des Objets

    Utiliser le sélection et la gamme des objets. Ceux-ci contiennent toutes sortes d'informations sur la sélection en cours, et là où il se trouve dans le nœud de l'arbre.

    Fair Warning:
    Ce n'est pas tout à fait impossible de faire ce que vous décrivez, mais si vous obtenez beaucoup de fantaisie, vous serez en assez profonde de l'eau de navigateur de bizarreries et d'incompatibilités. Vous allez avoir à faire beaucoup de de détection d'un objet, de vérification pour vous assurer que vous avez de la cohérence des valeurs et des méthodes. Progressivement vérifier l'ensemble de vos navigateurs que vous développez. Bonne chance!

    OriginalL'auteur keparo

  3. 1

    Voici un cross-browser exemple, adapté de cette réponse de travailler avec les iframes.

    function pasteHtmlAtCaret(html, selectPastedContent, iframe) {
var sel, range;
var win = iframe ? iframe.contentWindow : window;
var doc = win.document;
if (win.getSelection) {
//IE9 and non-IE
sel = win.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
//Range.createContextualFragment() would be useful here but is
//only relatively recently standardized and is not supported in
//some browsers (IE9, for one)
var el = doc.createElement("div");
el.innerHTML = html;
var frag = doc.createDocumentFragment(), node, lastNode;
while ( (node = el.firstChild) ) {
lastNode = frag.appendChild(node);
}
var firstNode = frag.firstChild;
range.insertNode(frag);
//Preserve the selection
if (lastNode) {
range = range.cloneRange();
range.setStartAfter(lastNode);
if (selectPastedContent) {
range.setStartBefore(firstNode);
} else {
range.collapse(true);
}
sel.removeAllRanges();
sel.addRange(range);
}
}
} else if ( (sel = doc.selection) && sel.type != "Control") {
//IE < 9
var originalRange = sel.createRange();
originalRange.collapse(true);
sel.createRange().pasteHTML(html);
if (selectPastedContent) {
range = sel.createRange();
range.setEndPoint("StartToStart", originalRange);
range.select();
}
}
}

    OriginalL'auteur Tim Down

  4. 0

    Vous pouvez également utiliser un rond-point de la méthode à l'aide de insertImage. Vous insérez une fausse image (ou une petite) à l'aide de la execCommand "insertImage", puis vous utilisez Javascript pour remplacer le innerHTML pour ajouter le texte.

    Par exemple:

    iFrame.focus()
iFrame.document.execCommand("insertImage", "", "fakeimage.jpg")
iFrame.document.body.innerHTML=iFrame.document.body.innerHTML.replace("<img src=\"fakeimage.jpg\">", "MY CUSTOM <b>HTML</b> HERE!")

    Alors que l'iFrame est égale à l'id de l'iFrame. Ou, vous pouvez utiliser un DIV couche à l'aide de document.getElementById("IDofDIVlayer").innerHTML

    Être sûr de se concentrer avant d'appeler la execCommand, sinon il ne fonctionne pas dans IE.

    Cette méthode fonctionne dans IE aussi. Testés.

    OriginalL'auteur SyntaxLAMP