Exemple d'analyse de l'idée de base de l'éditeur H5

Le code et les fonctionnalités sont testés sous chrome49 et sont valides.

L'essence du rendu de texte est le rendu des nœuds de texte. Le point de départ et le point d'arrivée sélectionnés peuvent être obtenus via l'objet intégré Range

var range = getRangeObject();var start = range.startOffset,
end = range.endOffset;var startContainer = range.startContainer;var endContainer = range.endContainer;

Le code getRangeObjec est le suivant

function getRangeObject(){if(window.getSelection)
{var selection = window.getSelection();if(selection.rangeCount > 0)
{return selection.getRangeAt(0);
}
}else if(document.selection)
{return document.selection.createRange(); 
}return null;
};

Le point de départ est toujours à gauche et le point final est toujours à droite, peu importe de la direction sélectionnée.

Ce n'est que lorsque le début du point de départ ou la fin du point de fin est
que le nœud de texte n'est pas renvoyé. La position de l'élément br peut être déterminée par start. et fin, respectivement startContainer.childNodes [start], endContainer.childNodes[end-1]. Le début du nœud de texte renvoyé représente la position de départ du curseur par rapport au nœud de texte de départ, et la fin représente la position de fin du curseur par rapport au nœud de texte de fin.

L'algorithme pour obtenir le prochain nœud de texte est

function getNextTextNode(startNode,dir = "nextSibling"){//记录startNode变化之前的状态，startNode变化后无效时便于状态的回滚let unchangeNode = startNode;if(startNode.nodeType == 3){
        startNode = startNode[dir];
    }while (true){if(startNode == undefined){if(unchangeNode == undefined){//保护机制throw new Error("程序会陷入死循环");break;
            }/*startNode所在的父元素所有选中节点遍历完毕，将sartNode指向父元素的兄弟节点*/let parent = unchangeNode.parentElement;
            unchangeNode = parent;
            startNode = parent[dir];
        }else if(startNode.nodeType == 3){//文本节点则退出循环break;
        }else if(startNode.tagName == "BR"){//处理单标签,避免不必要的迭代unchangeNode = startNode;
            startNode = startNode[dir];
        }else if(startNode.nodeType == 1){/*如果是双标签元素则进入*/unchangeNode = startNode;if(dir == "previousSibling"){

                startNode = $(startNode).contents().last().get(0);
            }else if(dir == "nextSibling"){
                startNode = $(startNode).contents().first().get(0);
            }else {//便于错误的定位throw new Error("错误的遍历方向:"+dir);
            }
        }else {//便于错误的定位throw new Error("不期待的元素类型=》"+startNode);

        }
    }    return startNode;
    
}

//La fonction ci-dessus utilise des variables externes + une boucle while pour remplacer la récursivité , Le mécanisme de protection supplémentaire réduit les utilisations abusives et les bogues potentiels conduisant à une expérience extrêmement médiocre.

Obtenir tous les nœuds de texte entre le nœud de début et le nœud de fin

function getTextNodes(startTextNode,endTextNode){
    let textNodeArray = [];
    let node = startTextNode;while (true) {
        node = getNextTextNode(node);if(node == endTextNode){break;
        }
        textNodeArray.push(node);
    }    return textNodeArray;
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!