Cuando uso el navegador contenteditable = true en un div para permitir que el usuario actualice el texto, me encuentro con este problema (usando Chrome):

Al usar elborrar tecla de retroceso para eliminar un salto de línea (saltar hacia atrás una línea) el navegador inserta una etiqueta con un conjunto de estilos en línea, alrededor de ese texto.

Esto es realmente frustrante porque no solo lo hace, sino que también agrega un estilo en línea a esa etiqueta de intervalo, por ejemplo, si mi color de fuente es actualmente negro, agrega un estilo = "color: negro" a esa etiqueta de intervalo.

El resultado es que ya no puedo editar el color de ese texto con mi barra de herramientas, ya que el estilo en línea ha sido definido de manera estricta. Lo mismo ocurre con el tamaño de fuente si hago lo mismo haciendo una copia de seguridad de una línea con la tecla de eliminación.

Cualquier persona aquí que pueda enseñarme una o dos cosas sobre contenteditable, o sugerir una manera de eliminar el intervalo: s, si no es posible evitar este comportamiento del navegador ...

** Para reproducir este problema ** - Cree un div en el navegador, establezca el estilo en línea con, por ejemplo, tamaño de letra: 36px - Edite el texto del div con contenido editable en el navegador, escriba un par de líneas con saltos de línea manuales. - Ahora ponga el cursor al frente de / antes de un párrafo de texto y presione la tecla de retroceso. Ahora se debe generar una etiqueta de separación alrededor del texto que ESTÁ EN FRENTE DE su cursor, y el estilo de la misma cambió.

 ACTUALIZAR** Así que he intentado algunas soluciones diferentes con éxito limitado. Primero traté de eliminar todas las etiquetas, pero luego también perdí todos los saltos de línea (tal vez una mejor expresión regular podría resolver esto, no soy un experto en escritura regExp).

Todas las funciones a continuación fueron llamadas primero al evento keyup, pero luego las adjunté para deseleccionar el cuadro de texto. Cómo disparar por debajo de las funciones es irrelevante para la pregunta.

        //option to remove all tags
        var withTags = $(textObject).html();
        var withoutTags = withTags.replace(/<(?:.|\n)*?>/gm, '');       
        $(textObject).html(withoutTags);

Mi segundo intento fue más exitoso, al eliminar las etiquetas de estilo de los objetos debajo del cuadro de texto (los divs y los espacios se extienden dentro del cuadro de texto que agregó Chrome), aquí estaba mi primer código

        //option to remove style of elements
        $(textObject).children().each(function() {
            $(this).removeAttr('style');
            console.log('removing style from first level element: '+this);

        });

Luego me di cuenta de que cada vez que edito un cuadro de texto, Chrome podría agregar un nuevo nivel anidado de etiquetas div / span que el código anterior no alcanzará, así que hice esto:

        //option to remove style of elements
        $(textObject).children().each(function() {
            $(this).removeAttr('style');
            console.log('removing style from first level element: '+this);

            //And of course it would be all too easy if chrome added only one level of elements...
            $(this).children().each(function() {
                $(this).removeAttr('style');
                console.log('removing style from second level element: '+this);
            });

        });

Pero eso no es suficiente ya que la cantidad de anidación teóricamente podría ser ilimitada. Sigo trabajando en una mejor solución. Cualquier entrada es apreciada =)