/**
* 获取当前选区的数据
* @param { String } id 当前的tinymce ID
* @return { endConfig, startConfig } 选区的起始节点数据 包含父组件 选中文本 起止偏移量
*/
export const handleHeight = (id) => {
// 获取实例
let editor = window.tinymce.get(id)
// 获取选区
var range = tinymce.activeEditor.selection.getRng()
// 获取文本节点 container父元素节点 offset偏移
const getAllTextNodes = (container,offset) => {
var textNodes = [];
function getP(n){
// 限定了父元素的元素类型 此处根据个人需求调整
if([
'P',
'H1',
'H2',
'H3',
'H4',
'H5',
'H6',
'H7',
'H8',
].includes(n.parentNode.tagName)){
return n.parentNode
}else{
return getP(n.parentNode)
}
}
let pNode = getP(container)
function traverse(node) {
if (node.nodeType === Node.TEXT_NODE) {
textNodes.push(node);
}
for (var i = 0; i < node.childNodes.length; i++) {
traverse(node.childNodes[i]);
}
}
traverse(pNode);
// 输出所有文本节点
let txt = ''
let obj = {}
textNodes.map((node)=> {
if(obj.pid)return;
if(node == container){
obj = {
pid: pNode.getAttribute('data-id'),// 这个是个人业务需求设定的 如果没有需求可忽略
offset:txt.length+offset,// 偏移
text:node.nodeValue,// 节点内容
pTagName:pNode.tagName // 父组件tagName
}
}
txt += node.nodeValue;
});
return {
obj,
txt,
textNodes,
};
}
const { obj:startConfig } = getAllTextNodes(range.startContainer,range.startOffset);
const { obj:endConfig } = getAllTextNodes(range.endContainer,range.endOffset);
return {
endConfig,
startConfig,
}
}
tinymce获取当前选区的所有文本节点
最新推荐文章于 2025-06-05 16:04:16 发布