Mettre l’accent sur l’élément div contenteditable

J’ai un

où je définis par un WYSIWYG certains éléments. Par exemple,

,

, etc. J’aimerais mettre directement l’accent sur l’un de ces éléments.

Par exemple sur

. Mais il semble que la fonction focus() ne fonctionne pas sur les éléments

éléments

Y a-t-il un autre moyen de définir le focus dans mon cas?

Ancien message mais aucune des solutions n’a fonctionné pour moi. Je l’ai compris finalement:

 var div = document.getElementById('contenteditablediv'); setTimeout(function() { div.focus(); }, 0); 

Dans les navigateurs modernes, vous pouvez utiliser:

 var p = document.getElementById('contentEditableElementId'), s = window.getSelection(), r = document.createRange(); r.setStart(p, 0); r.setEnd(p, 0); s.removeAllRanges(); s.addRange(r); 

Mais si votre élément est vide, j’ai quelques problèmes étranges, donc pour les éléments vides, vous pouvez le faire:

 var p = document.getElementById('contentEditableElementId'), s = window.getSelection(), r = document.createRange(); p.innerHTML = '\u00a0'; r.selectNodeContents(p); s.removeAllRanges(); s.addRange(r); document.execCommand('delete', false, null); 

Après la suppression du curseur nbsp rest à l’intérieur de l’élément p

PS, l’espace ordinaire ne fonctionne pas pour moi

J’ai remarqué que jQuery focus () ne fonctionnait pas avec mon DIV pouvant être édité avec la largeur et la hauteur de 0. Je l’ai remplacé par .get (0) .focus () – la méthode de focus JavaScript native – et ça marche.

Si quelqu’un, qui utilise MediumEditor qui gère l’élément contenteditable , tombe sur ce problème, voici ce qui a fonctionné pour moi:

 editor.selectElement(editorDOMNode); 
  1. editor est une instance de MediumEditor .
  2. editorDOMNode est une référence au noeud DOM réel editorDOMNode être editorDOMNode .
  3. Il est également possible de se concentrer sur un nœud enfant spécifique dans l’éditeur comme suit:

     editor.selectElement(editorDOMNode.childNodes[0]); 

Vous pouvez essayer ce code, il peut se concentrer automatiquement dans votre dernier emplacement d’insertion.

 let p = document.getElementById('contenteditablediv') let s = window.getSelection() let r = document.createRange() r.setStart(p, p.childElementCount) r.setEnd(p, p.childElementCount) s.removeAllRanges() s.addRange(r) 

.focus() si vous ne pouvez pas appeler .focus() sur un élément, c’est parce que l’index tabIndex est -1, ce qui signifie que la touche de tabulation ne peut pas s’y concentrer lorsque vous appuyez sur la touche tabulation pour naviguer.

Changer votre tabIndex à> = 0 vous permettra de vous concentrer sur les éléments. Si vous devez le faire dynamicment, vous pouvez simplement append un tabindex> = 0 à votre élément dans l’écouteur d’événement.

Lier un gestionnaire d’événements “click” à tous les éléments de la div contenteditable, et changer la classe / style sur click (c.-à-d. Ajouter la classe “focalisée” à l’élément);

Vous pouvez identifier, pour l’utilisateur, quel élément a le focus en ajoutant un style tel qu’une bordure colorée ou une ombre interne. Ensuite, lorsque vous souhaitez accéder à l’élément ciblé de votre script jQuery, procédez comme suit:

var focused = $('.focused');