H5エディタの核となるアイデアの分析例-H5 チュートリアル-php.cn

H5エディタの核となるアイデアの分析例

零下一度

リリース： 2017-07-27 15:50:57

オリジナル

1526 人が閲覧しました

コードと機能は chrome49 でテストされており、有効です。

テキストレンダリングの本質はテキストノードのレンダリングです

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

ログイン後にコピー

getRangeObjecのコードは次のとおりです

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

ログイン後にコピー

選択した方向に関係なく、始点は常に左側にあり、終点は常に右側にあります。

始点の先頭または終点の終点が
の場合のみ、startContainerとendによってbr要素の位置を決定することができます。子ノード[開始]、子ノード[終了-1]。返されたテキストノード start は、開始テキストノードを基準としたカーソルの開始位置を表し、end は終了テキストノードを基準としたカーソルの終了位置を表します。

次のテキストノードを取得するためのアルゴリズムは

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

ログイン後にコピー

//上記の関数は外部変数と while ループを使用して再帰を置き換え、追加された保護メカニズムにより誤用、潜在的なバグ、および非常に悪いエクスペリエンスが軽減されます。
開始ノードと終了ノード間のすべてのテキストノードを取得します

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

ログイン後にコピー

以上がH5エディタの核となるアイデアの分析例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。