3
votes

Insérer une balise HTML pour le texte sélectionné dans la balise de paragraphe

J'essaye d'ajouter un nouvel élément pour l'élément sélectionné dans la balise de paragraphe. Extrait de code HTML comme ci-dessous:

 <div class="parent-bodytext">
     <p>Hello</p>
     <p>This <strong>one</strong> is</p>
     <p>Sample Text</p>
 </div>

Donc, dans l'extrait ci-dessus, j'ai sélectionné "un" mot de la deuxième balise P et en utilisant tout événement, j'essaie d'ajouter un élément à ce texte sélectionné afin que la sortie soit être comme ci-dessous:

 <div class="parent-bodytext">
     <p>Hello</p>
     <p>This one is</p>
     <p>Sample Text</p>
 </div>

Alors, comment ajouter cet élément "Strong" nouvellement créé pour le texte sélectionné?

javascript html ckeditor

8 commentaires

Veuillez expliquer plus lorsque vous devez ajouter une balise forte

@Justcode si je sélectionne un bouton, pour que la balise forte soit ajoutée au texte sélectionné.

Copie possible de Comment mettre le texte sélectionné en gras / italique / souligné en javascript?

Je ne suis pas sûr à 100%, mais je pense qu'il n'est pas possible d'ajouter une balise forte avec le texte sélectionné si vous voulez faire cela, vous devez utiliser un éditeur de texte comme ckeditor ckeditor.com et utilisez css pour masquer la bordure, etc. afin qu'elle s'affiche comme la page d'origine.

@YaseenAhmad J'essaye cette partie dans CKEditor uniquement. Savez-vous comment y parvenir avec CKEditor?

@AvinashJadhav voir ce lien jsfiddle.net/pq8yg5ke faites-moi savoir si vous avez besoin d'aide supplémentaire.

@YaseenAhmad c'est exactement ce que je recherche. Pouvez-vous s'il vous plaît élaborer le code javascript? Je n'y ai rien trouvé.

Je réponds à la question tout le code disponible hop ça vous aidera. bonne chance.

3 Réponses :

0
votes

EDIT: suppression de la dépendance jQuery Vous pouvez y parvenir en utilisant CSS. Tout d'abord, vous devez séparer chaque mot par une étendue. Ajoutez ensuite la classe strong sur l'étendue d'où provient l'événement

<div class="parent-bodytext">
     <p><span>Hello</span></p>
     <p><span>This</span> <span>one</span> <span>is</span></p>
     <p><span>Sample</span> <span>Text</span></p>
 </div>

.strong{
  font-weight: bold;
}

window.onload = function () {
  document.getElementsByClassName("parent-bodytext")[0].onclick = function(e) {
    var tgt = e.target;
    if (tgt && tgt.nodeName === 'SPAN') {
      tgt.classList.add('strong');
    }
  };
};

4 commentaires

Bonne réponse mais il veut ajouter fort uniquement avec du texte sélectionné et non du texte intégral.

Est-ce possible sans jquery? Utilisation des API de base de HTML, quelque chose comme element.innerHTML, document.getSelection (), getRangeAt (0).

@AvinashJadhav supprime la dépendance jQuery.

@YaseenAhmad a un peu changé le code, maintenant la classe forte n'est ajoutée qu'au mot sélectionné, vous pouvez exécuter un extrait de code et essayer.

3
votes

Vous pouvez utiliser window.getSelection a > à cet effet

 <div class="parent-bodytext">
 <p>Hello</p>
 <p>This one is</p>
 <p>Sample Text</p>
 </div>

const wrapper = document.getElementsByClassName('parent-bodytext')[0];

wrapper.addEventListener('mouseout', event => {
   const selection = window.getSelection();
   if (selection.rangeCount) {
       const replacement = document.createElement('strong');
       replacement.textContent = selection.toString();
       const range = selection.getRangeAt(0);
       range.deleteContents();
       range.insertNode(replacement);
   }
});

0 commentaires

2
votes

Vouliez-vous quelque chose comme ça?

<p>I am a sentence.</p>

window.onload = () => {
  function getSelectionParentElement() {
    var parentEl = null,
      sel;
    if (window.getSelection) {
      sel = window.getSelection();
      if (sel.rangeCount) {
        parentEl = sel.getRangeAt(0).commonAncestorContainer;
        if (parentEl.nodeType != 1) {
          parentEl = parentEl.parentNode;
        }
      }
    } else if ((sel = document.selection) && sel.type != "Control") {
      parentEl = sel.createRange().parentElement();
    }
    return parentEl;
  }

  function getSelectedText() {
    var text = "";
    if (typeof window.getSelection != "undefined") {
      text = window.getSelection().toString();
    } else if (
      typeof document.selection != "undefined" &&
      document.selection.type == "Text"
    ) {
      text = document.selection.createRange().text;
    }
    return text;
  }
  
  const makeBold = (selectStart, selectEnd, length, text)=>{
    let replacedText = `<strong>${text.substr(selectStart, length)}</strong>`;
    let textHalfA = text.substr(0, selectStart);
    let textHalfB = text.substr(selectEnd, text.length - 1);
    return textHalfA + replacedText + textHalfB;
  };
  
  function handleMouseUp() {
    // the selected text
    const text = getSelectedText();
    // the length of the selected content
    const selectedTextLength = text.length;
    // the parent of the selected content
    let parent = getSelectionParentElement();
    // the entire content of the parent
    let parentText = parent.innerHTML;
    // where the user's selection starts
    let selectStart = window.getSelection().getRangeAt(0).startOffset;
    // where the user's selection ends
    let selectEnd = window.getSelection().getRangeAt(0).endOffset;
    if (parent) {
      parent.innerHTML = makeBold(selectStart, selectEnd, selectedTextLength, parentText);
    }
  }

  document.onmouseup = handleMouseUp;
  document.onkeyup = handleMouseUp;
};

Les sources seraient ceci a > et ceci .

Aussi, voici un stylo :)

Edit: le code est mis à jour. La modification du contenu sélectionné doit être effectuée correctement maintenant. Cependant, je n'ai aucune idée de comment gérer une deuxième modification de l'élément déjà modifié. (Je vais mettre à jour à nouveau bientôt. À moins que OP ait une idée;))

3 commentaires

lorsque je réponds, j'obtiens le même problème lorsque vous sélectionnez uniquement "A" dans le texte, il mettra en gras "A" partout dans le texte.

Ah. J'ai manqué ça. Donne-moi une seconde

@YaseenAhmad a corrigé celui-là :) Je vais essayer de résoudre le problème que j'ai mentionné après l'école.