wangeditor.点击选中行

通过当前点击元素找到父元素

// 通过子元素查找编辑器的块级元素
export const findBlock = target => {
  if (!target) {
    return null
  }
  if (target.hasAttribute && target.hasAttribute('data-slate-editor')) {
    return null
  }
  if (
    target.getAttribute && 
    target.getAttribute('data-slate-node') === 'element' &&
    target.parentNode &&
    target.parentNode.hasAttribute('data-slate-editor')
  ) {
    const editorDom = document.querySelector('[data-slate-editor]')
    const childElements = editorDom.children
    const index = Array.prototype.indexOf.call(childElements, target)
    return { target, index }
  }
  return findBlock(target.parentNode)
}

点击事件方法1

const handleEditClick = (event) => {
      const targetNode = event.target;
      const { target: blockNode, index } = findBlock(targetNode) || {};
      if(aiBlockInfo.blockNode){
        editDiv.removeEventListener('click',handleClickEdit);
        aiBlockInfo.blockNode.classList.remove('ai-active-row');
        aiBlockInfo.blockNode.removeChild(editDiv);
        aiBlockInfo.blockNode = null;
      }
      if(!blockNode || (!index && index !=0)){
        return;
      }
      if(!canEditType.includes(orginNote[index].type)){// 不支持图片块、表格块、代码块等其他块内容
        return;
      }
      aiBlockInfo.blockNode = blockNode;
      aiBlockInfo.index = index;

      blockNode.classList.add('ai-active-row');//编辑按钮的小三角

      const divClass = blockNode.offsetTop-42>articleContentRef.value.scrollTop?'ai-edit-btn-tip-top':'ai-edit-btn-bottom';
      editDiv.className  = `ai-edit-btn-tip ${divClass}`
      editDiv.innerHTML = `<span class="ai-edit-arrow" ></span> 编辑`;
      editDiv.addEventListener("click", handleClickEdit);
      blockNode.appendChild(editDiv);
      forceUpdatePage();
      proxy.$forceUpdate();
    }

点击事件方法2

const hiddenAiTip = () => {
 	aiSelectInfo.height = 0;
  	aiSelectInfo.top = '0px';
   	aiSelectInfo.display="none";
   	aiSelectInfo.editClass  = ` ai-edit-btn-tip`;
 }

 const handleEditClick = (event) => {
      const targetNode = event.target;
      const { target: blockNode, index } = findBlock(targetNode) || {};
      hiddenAiTip()
      if(!blockNode || (!index && index !=0)){
        return;
      }
      if(!canEditType.includes(orginNote[index].type)){// 不支持图片块、表格块、代码块等其他块内容
        return;
      }
      aiBlockInfo.blockNode = blockNode;
      aiBlockInfo.index = index;

      aiSelectInfo.height=( blockNode.clientHeight + 8)+'px';
      aiSelectInfo.top = (blockNode.scrollTop + blockNode.offsetTop + 14)+'px';
      aiSelectInfo.display="block";
      const editClass = blockNode.offsetTop-42>articleContentRef.value.scrollTop?'ai-edit-btn-tip-top':'ai-edit-btn-bottom';
      aiSelectInfo.editClass  = `ai-edit-btn-tip ${editClass}`;
      forceUpdatePage();
}