Estoy agregando un fondo a un texto seleccionado en un elemento editable vía document.execCommand('hiliteColor', false, '#d4ecff'); .
Si el texto seleccionado contiene algunas etiquetas de formato ( <b></b> por ejemplo), llamar a document.execCommand('removeFormat') en la selección no elimina todos los formatos. Es como si el color de fondo se pasara al texto antes incluido en <b></b> .
Estoy enfrentando el problema en Chrome (versión 100.0.4896.75 - 64 bits) así como en Brave (versión 1.37.111 Chromium: 100.0.4896.79 - 64 bits). Todo parece funcionar como se esperaba en Firefox.
Aquí hay una demostración y los pasos para reproducir: https://jsfiddle.net/L82ogcf5/
PD: Sé que ya no se recomienda el uso de document.execCommand() , así que no lo mencione. Es irrelevante hasta que la función esté realmente obsoleta (todos sabemos que eso no sucederá pronto).
¡Estás agregando un hiliteColor! Pero luego desea eliminar cualquier formato.
Primero se eliminará la etiqueta <b> , y solo después de un segundo clic se eliminará hiliteColor .
Lo que quieres en cambio es:
// Remove hiliteColor, not other text formatting btn2.onclick = () => document.execCommand("hiliteColor", false, "transparent");Ejemplo:
const btn1 = document.querySelector("#btn1"); btn1.onclick = () => document.execCommand("hiliteColor", false, "red"); const btn2 = document.querySelector("#btn2"); btn1.onclick = () => document.execCommand("hiliteColor", false, "transparent"); #input { margin-top: 1rem; border: 1px solid; } Steps to reproduce: <ol> <li>Select all the text inside #input</li> <li>Click on the button 1 - "add background colour"</li> <li>Click on the button 2 - "remove format</li> <li>Do you see a red background where the bold text was? Here's my bug</li> </ol> <button id="btn1">add background colour</button> <button id="btn2">remove format</button> <div id="input" contenteditable="true"> I am a real <strong>nice test</strong> string </div> PD: lamentablemente, esta tecnología está a punto de morir (OK, tal vez no tan pronto debido a las tantas aplicaciones que en esta fecha funcionan con contenteditable y execCommand). Solo porque, presentado por IE, y con el auge de los navegadores de la competencia, todos no estaban de acuerdo con las especificaciones y lentamente se convirtió en una bestia inmanejable... sin reemplazo actualmente en desarrollo activo o especificaciones escritas, AFAIK.
en primer lugar, .execCommand está decapitado, en segundo lugar, en cromo, la función removeFormat funciona en capas. Eliminó el color de fondo porque era la primera capa de formato. Solo eliminó la negrita en el texto en negrita porque era la primera capa de formato allí. Intente repetir el comando 4 veces para resaltado, negrita, cursiva y subrayado. ¿Supongo que está tratando de crear un cuadro de texto con formato ajustable?
Solo para este ejemplo, una solución sería, en lugar de clearformatting , undo como comando.
O bien, podría volver a hacer execCommand, establecer el color de resaltado en blanco o transparente o algo así.