Предотвращать создание контекстно-зависимого режима при создании тегов <span>

Когда я использую браузер contenteditable = true в div, чтобы позволить пользователю обновлять текст в нем, я сталкиваюсь с этой проблемой (используя Chrome):

При использовании клавиши backspace delete для удаления разрыва строки (переход вверх по строке) браузер вставляет тег с встроенным набором стилей вокруг этого текста.

Это действительно разочаровывает, потому что это не только делает это, но также добавляет встроенный стиль этому тегу span, например, если мой цвет шрифта в настоящее время является черным, он добавляет к этому тегу span стиль = "color: black",

В результате я больше не могу редактировать цвет этого текста с помощью моей панели инструментов, так как он был привязан к тегу span встроенным стилем. То же самое происходит с размером шрифта, если я делаю то же самое, резервное копирование строки с помощью ключа удаления.

Любой, кто мог бы научить меня чему-то доволенному или предложить способ удалить span: s, если это невозможно предотвратить это поведение браузера.

** Чтобы воспроизвести эту проблему ** - Создайте div в браузере, установите для него встроенный стиль, например, размером шрифта: 36px - Редактируйте текст div с содержимым, редактируемым в браузере, напишите пару строк с ручными разрывами строк. - Теперь поместите курсор в FRONT OF/BEFORE в абзац текста и нажмите backspace. Тег span должен теперь генерироваться вокруг текста, который находится в FRONT вашего курсора, и стиль его изменился.

ОБНОВЛЕНИЕ ** Поэтому я пробовал несколько разных решений с ограниченным успехом. Сначала я попытался удалить все теги, но потом я потерял все линейные разрывы (возможно, лучшее регулярное выражение могло бы решить эту проблему, я не специалист по записи regExp).

Все функции, приведенные ниже, сначала вызывались при событии keyup, но затем я привязал их, чтобы отменить выбор текстового поля. Как срабатывать ниже функции не имеет значения для вопроса.

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

Моя вторая попытка была более успешной, удалив теги стиля объектов под текстовым полем (divs ans охватывает внутри текстового поля, добавленного хром), вот мой первый код

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

        });

Затем я понял, что каждый раз, когда я редактирую текстовое поле, chrome может добавить новый вложенный уровень тегов div/span, который не будет указан выше, поэтому я сделал это:

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

        });

Но этого недостаточно, так как теоретически теоретически неограниченное количество гнездования может быть неограниченным. Все еще работает над лучшим решением. Любой вход оценивается =)

Ответы

$(document).on("DOMNodeInserted", $.proxy(function (e) {
        if (e.target.parentNode.getAttribute("contenteditable") === "true") {
            with (e.target.parentNode) {
                replaceChild(e.target.firstChild, e.target);
                normalize();
            }
        }
}, this));

$(document).on("DOMNodeInserted", $.proxy(function (e) {
    if (e.target.parentNode.getAttribute("contenteditable") === "true") {
        var newTextNode = document.createTextNode("");
        function antiChrome(node) {
            if (node.nodeType == 3) {
                newTextNode.nodeValue += node.nodeValue.replace(/(\r\n|\n|\r)/gm, "")
            }
            else if (node.nodeType == 1 && node.childNodes) {
                    for (var i = 0; i < node.childNodes.length; ++i) {
                        antiChrome(node.childNodes[i]);
                    }
            }
        }
        antiChrome(e.target);

        e.target.parentNode.replaceChild(newTextNode, e.target);
    }
}, this));

        $(textObject).find('*').removeAttr('style');

t = $(element).text()
$(element).children().remove()
$(element).text(t)