Quando eu uso o navegador contenteditable = true em um div para permitir que o usuário atualize o texto nele, me deparo com esse problema (usando o Chrome):

Ao usar oexcluir tecla de retrocesso para remover uma quebra de linha (saltar de volta uma linha) o navegador insere uma tag com o conjunto de estilos embutidos, em torno desse texto.

Isso é realmente frustrante porque não só faz isso, mas também adiciona um estilo inline a essa tag de span, por exemplo, se a cor da minha fonte é atualmente preta, ela adiciona um style = "color: black" à tag span.

O resultado é que não posso mais editar a cor desse texto com a minha barra de ferramentas, já que ela foi definida com dificuldade para a tag span pelo estilo inline. A mesma coisa acontece com o tamanho da fonte se eu fizer a mesma coisa fazendo o backup de uma linha com a tecla delete.

Alguém aqui que poderia me ensinar uma coisa ou duas sobre contenteditable, ou sugerir uma maneira de remover o span: s, se não for possível evitar esse comportamento do navegador ..

** Para reproduzir este problema ** - Crie um div no navegador, defina o estilo embutido nele com por exemplo font-size: 36px - Edite o texto do div com o conteúdo editável no navegador, escreva um par de linhas com quebras de linha manuais. - Agora coloque o cursor IN FRONT OF / ANTES de um parágrafo do texto e pressione backspace. Agora, uma tag span deve ser gerada em torno do texto que está IN FRONT OF do seu cursor, e o estilo dele foi alterado.

 ATUALIZAR** Então eu tentei algumas soluções diferentes com sucesso limitado. Primeiro tentei remover todas as tags, mas também perdi todas as quebras de linha (talvez um regexp melhor pudesse resolver isso, não sou especialista em escrever regExp).

Todas as funções abaixo foram chamadas pela primeira vez no evento keyup, mas depois as anexei para desmarcar a caixa de texto. Como disparar abaixo das funções é irrelevante para a questão.

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

Minha segunda tentativa foi mais bem-sucedida, removendo tags de estilo de objetos sob a caixa de texto (os divs ans se estendem dentro da caixa de texto adicionada pelo chrome), aqui estava meu primeiro código

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

        });

Então percebi que toda vez que eu editava uma caixa de texto, o chrome poderia adicionar um novo nível aninhado de div / span tags que o código acima não alcançaria, então eu fiz isso:

        //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);
            });

        });

Mas isso não é suficiente, já que a quantidade de aninhamento poderia, teoricamente, ser ilimitada. Ainda trabalhando em uma solução melhor. Qualquer entrada é apreciada =)