Comment puis-je changer la police lorsque je sélectionne un texte spécifique de la div. Le code ci-dessous change la police de tout le texte lorsque je sélectionne une police dans ma liste déroulante.

function changeFont(font) {
  document.getElementById("note_header").style.fontFamily = font.value;
}
Highlight text and change font <br>
<select id="select_font" onchange="changeFont(this);">
            <option value="Arial">Arial</option>
            <option value="Sans Serif" selected>Sans Serif</option>
            <option value="Comic Sans MS">Comic Sans MS</option>
            <option value="Times New Roman">Times New Roman</option>
            <option value="Courier New">Courier New</option>
            <option value="Verdana">Verdana</option>
            <option value="Trebuchet MS">Trebuchet MS</option>
            <option value="Arial Black">Arial Black</option>
            <option value="Impact">Impact</option>
            <option value="Bookman">Bookman</option>
            <option value="Garamond">Garamond</option>
            <option value="Palatino">Palatino</option>
            <option value="Georgia">Georgia</option>
        </select>
<div contenteditable="true" id="note_header" style="width:200px; height:200px; border: 1px solid #ccc">
  Some Content
</div>
0
User786 16 avril 2018 à 10:11

3 réponses

Meilleure réponse

Essayer d'améliorer la réponse d'Ankit,
Voici une solution qui n'utilise pas la fonction replace().

Le problème avec la solution d'Ankit est que la première occurrence d'un texte sélectionné a été remplacée en cas de répétition d'un texte.
Par exemple, lorsque le texte est "abc abc" et que nous avons sélectionné le second, c'était le premier à avoir changé sa police.

⋅ ⋅ ⋅

L'extrait ci-dessous crée un nouvel élément html avec le texte sélectionné et la police choisie, puis supprime la sélection et insère le nouvel élément à sa place:
(Voir les commentaires dans le code)

function changeFont(font) {
  var sel = window.getSelection(); // Gets selection
  if (sel.rangeCount) {
    // Creates a new element, and insert the selected text with the chosen font inside
    var e = document.createElement('span');
    e.style = 'font-family:' + font.value + ';'; 
    e.innerHTML = sel.toString();

    // https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt
    var range = sel.getRangeAt(0);
    range.deleteContents(); // Deletes selected text…
    range.insertNode(e); // … and inserts the new element at its place
  }
}
.editable {
  width: 360px;
  height: 120px;
  border: 1px solid #ccc
}
Highlight text and change font <br>
<select id="select_font" onchange="changeFont(this);">
  <option value="Arial">Arial</option>
  <option value="Sans Serif" selected>Sans Serif</option>
  <option value="Comic Sans MS">Comic Sans MS</option>
  <option value="Times New Roman">Times New Roman</option>
  <option value="Courier New">Courier New</option>
  <option value="Verdana">Verdana</option>
  <option value="Trebuchet MS">Trebuchet MS</option>
  <option value="Arial Black">Arial Black</option>
  <option value="Impact">Impact</option>
  <option value="Bookman">Bookman</option>
  <option value="Garamond">Garamond</option>
  <option value="Palatino">Palatino</option>
  <option value="Georgia">Georgia</option>
</select>
<div contenteditable="true" class="editable">
  Some Content
</div>

Notez que jQuery n'est pas ajouté inutilement.
(OP ne l'a pas utilisé dans sa question)

J'espère que ça aide.

7
Takit Isy 11 mai 2018 à 07:48

Vous pouvez essayer ceci:

function changeFont(font) {
  document.getElementById("note_header").style.fontFamily= font.value;
  document.getElementById("select_font").setAttribute(
   "style", "border: 1px solid red; outline: none");
   }
<select id="select_font" onchange="changeFont(this);">
            <option value="Arial">Arial</option>
            <option value="Sans Serif" selected>Sans Serif</option>
            <option value="Comic Sans MS">Comic Sans MS</option>
            <option value="Times New Roman">Times New Roman</option>
            <option value="Courier New">Courier New</option>
            <option value="Verdana">Verdana</option>
            <option value="Trebuchet MS">Trebuchet MS</option>
            <option value="Arial Black">Arial Black</option>
            <option value="Impact">Impact</option>
            <option value="Bookman">Bookman</option>
            <option value="Garamond">Garamond</option>
            <option value="Palatino">Palatino</option>
            <option value="Georgia">Georgia</option>
        </select>
<div contenteditable="true" id="note_header" style="width:200px; height:200px; border: 1px solid #ccc">
  Some Content
</div>
-4
Mamun 16 avril 2018 à 07:45

Vous devez utiliser window.getSelection() pour obtenir le texte sélectionné à partir du div et puisque vous êtes juste disposé à modifier le texte en surbrillance afin que vous puissiez entourer le texte en surbrillance avec l'élément <span>, puis appliquer le font-family css à cela <span>. Cet élément <span> contiendra le texte en surbrillance, de sorte que le font-family sera remplacé par ce texte en surbrillance uniquement.

function changeFont(font) {
    var selectedText = "";
    if (window.getSelection) {
      selectedText = window.getSelection().toString();
      var newContent = $('#note_header').html().replace(selectedText, '<span style="font-family:'+font.value+';">'+selectedText+'</span>');
      $('#note_header').html(newContent);
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Highlight text and change font <br>
<select id="select_font" onchange="changeFont(this);">
            <option value="Arial">Arial</option>
            <option value="Sans Serif" selected>Sans Serif</option>
            <option value="Comic Sans MS">Comic Sans MS</option>
            <option value="Times New Roman">Times New Roman</option>
            <option value="Courier New">Courier New</option>
            <option value="Verdana">Verdana</option>
            <option value="Trebuchet MS">Trebuchet MS</option>
            <option value="Arial Black">Arial Black</option>
            <option value="Impact">Impact</option>
            <option value="Bookman">Bookman</option>
            <option value="Garamond">Garamond</option>
            <option value="Palatino">Palatino</option>
            <option value="Georgia">Georgia</option>
        </select>
<div contenteditable="true" id="note_header" style="width:200px; height:200px; border: 1px solid #ccc">
  Some Content
</div>
1
Ankit Agarwal 16 avril 2018 à 07:24