0
248
ViewsAplicar estilo solo al texto seleccionado en el contenido editable <p>
Problema
Hola, tengo un código que cuando se hace clic en un botón, todo el contenido de una etiqueta contentEditable <p> tendrá un peso de fuente de 600 (negrita).
Lo que me pregunto es cómo puedo hacer que cuando se presiona el botón, en lugar de diseñar todo el contenido en la etiqueta p con un peso de fuente 600, solo aplique estilo al texto seleccionado. Por ejemplo, si solo resalta las dos primeras palabras de la etiqueta p y presiona el botón, solo se cambiará el peso de fuente de las dos primeras palabras.
Ejemplo de imagen
En el ejemplo, cuando se presiona el botón, solo se cambiaría el peso de fuente de las dos primeras palabras.
Enlace al código que contiene el violín: https://jsfiddle.net/AidanYoung/9tg4oas5/
2 answers
Answer question0
aquí está tu solución.
function changeBold() { const text = window.getSelection().toString(); var btn = document.createElement('span'); btn.innerHTML = text; btn.style.fontWeight = 'bold'; document.execCommand('insertHTML', false, btn.outerHTML); } <p contenteditable="true" id="contenttxt"> Some text in this paragraph tag </p> <button onclick="changeBold()">Bold selected text</button>0
Puede usar la etiqueta de intervalo y agregar ID
function changeBold() { document.getElementById("strongC").style.fontWeight = "600"; } <p contenteditable="true" id="contenttxt"> <span id="strongC">Some text</span> in this paragraph tag </p> <button onclick="changeBold()">Bold selected text</button>