从选定的节点中删除所有字体标签 - Javascript？

问题描述

这段代码的作用是：

• 从 contentEditable 中的选定节点格式化字体大小而不会失去焦点

问题：

[1]如果用户想要格式化一个没有格式化的片段，另一个已经用相同的字体大小格式化，这就是错误发生的地方。

[2] 要修复此错误，我需要删除选择中的所有字体标签。

[3] 大问题 => 如何在不丢失内容的情况下从选定节点中删除所有字体标签？

代码：

    ! function (doc,win) {
    var input = doc.getElementById('special'),editable = doc.getElementById('editable'),button = doc.getElementById('button'),inputFizeFont = doc.getElementById('inputFizeFont')
        fragment = null,range = null;

        // get common Ancestor Container
        function getTagFontAncestorFromNode() {
            var text = "",containerElement = null;
            if (typeof window.getSelection != "undefined") {
                var selc = window.getSelection();
                // var nodeEnd = selc.getRangeAt(0).endContainer.nextElementSibling

                if (selc.rangeCount) {
                    var node = selc.getRangeAt(0).commonAncestorContainer

                    containerElement = node.nodeType == 1 ? node : node.parentNode;

                    text = selc.toString();
                }
            } else if (typeof document.selection != "undefined" &&
                       document.selection.type != "Control") {
                var textRange = document.selection.createRange();
                containerElement = textRange.parentElement();
                text = textRange.text;
            }
            return {
                text: text,containerElement: containerElement
            }
        }
        function getAllFontTagsFromnode() {
            containerElementB = null;
            containerElementC = null;
            if (typeof window.getSelection != "undefined") {
                var selc = window.getSelection();

                if (selc.rangeCount) {
                    // var nodeEnd = selc.getRangeAt(0).endContainer
                    var nodeEnd = selc.getRangeAt(0),nodeStart = selc.getRangeAt(0)
                    // console.log('↓ nodeEnd ↓')
                    // console.log(selc.getRangeAt(0))
                    // console.log('↓ nodeStart ↓')
                    // console.log(selc.getRangeAt(0))

                    containerElementB = nodeEnd.nodeType == 1 ? nodeEnd : nodeEnd;
                    containerElementC = nodeStart.nodeType == 1 ? nodeStart : nodeStart;

                }
            }
            return {
                startContainer: containerElementB,endContainer: containerElementC
            }
        }

    //  save selection
    function saveSelection() {
        if (win.getSelection) {
            sel = win.getSelection();
            if (sel.getRangeAt && sel.rangeCount) {
                return sel.getRangeAt(0);
            }
        } else if (doc.selection && doc.selection.createRange) {
            return doc.selection.createRange();
        }
        return null;
    }
    // → save range Event
    function saveRangeEvent(event) {
        range = saveSelection();
        if (range && !range.collapsed) {
            fragment = range.cloneContents();
        }
    }

    editable.addEventListener('mouseup',saveRangeEvent)
    editable.addEventListener('keyup',saveRangeEvent)

    // →  set  font size
    editable.addEventListener('focusout',function (event) {
        var selc = getTagFontAncestorFromNode();
        var selcB = getAllFontTagsFromnode()
        
        console.log('startContainer')
        console.log(selcB.startContainer)

        console.log('↓ endCcontainer ↓')
        console.log(selcB.endContainer)



        /*
            *   If there is any tag font on the selected node => format the font-size according to the value typed in the input,Otherwise => Create a Tag Font set Fon-size attribute according to the value typed in input
            * !All this without losing focus
        */
        if (selc.containerElement.tagName == 'FONT') {
            console.log("has Tag Font")
            console.log(selc.containerElement)
            input.addEventListener('focusout',function (event) {
                selc.containerElement.setAttribute("style","font-size: "+input.value+"")
                input.value = '15px'
            })
        } else {
            console.log("!There is no font tag")
            console.log(selc.containerElement)

            input.addEventListener('focusout',function (event) {
            var size = doc.createElement('font')
                size.setAttribute("style","font-size: "+input.value+"")
                input.value = '15px'
                range.surroundContents(size)

            })
        }

    })

    // create fake selection
    input.addEventListener('mousedown',function (event) {
        if (fragment) {
            var span = doc.createElement('span')
            span.className = 'selected'
            range.surroundContents(span);
        }
    })
    // remove fake selection
    input.addEventListener('blur',function (event) {
        if (fragment) {
            range.deleteContents()
            range.insertNode(fragment)
        }
        fragment = null;
    },true)

}(document,window)

    .selected {
          background-color: dodgerblue;
          color: white;
        }
        body {
            display: grid;
        }

        #editable {
            padding: 10px;
            margin: 10px;
            border: 2px solid gainsboro;
            outline: 0;
        }
        #special{
            padding: 10px;
            margin: 10px;
            border: 1px solid darkgrey;
            justify-self: center;
            align-self: center;

        }

<input type="text" id="special"  placeholder="insert valid font-size (px)">

    <div id="editable" contenteditable="true">
        Select <font style="font-size: 30px">something</font>So far and click on the beautiful entry
        in Firefox<br>
        Entry Get focus and text yet <font style="font-size: 45px">selected</font>.
       <br> The text already formatted the entry loses focuss
    </div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）