TipTap获取图片的实际宽度和高度

我要写一个图片组件，需要设置图片的宽度，这个修改面板，期望在图片中间。所以需要获取图片实际的宽度和高度。

通过 DOM 元素的属性来获取。具体来说，使用 offsetWidth 和 offsetHeight（或 clientWidth 和 clientHeight）来读取宽度和高度。

// 首先检查图片节点是否激活
if (editor.isActive('image')) {
  // 获取图片的 src 属性，用于在 DOM 中查找图片元素
  const imageSrc = editor.getAttributes('image').src;

  // 使用选择器查找图片元素，确保选择正确的图片
  const imageElement = document.querySelector(`img[src="${imageSrc}"]`);

  if (imageElement) {
    // 获取图片的实际宽度和高度
    const actualWidth = imageElement.offsetWidth;  // 实际宽度
    const actualHeight = imageElement.offsetHeight; // 实际高度

    console.log('Actual Image Width:', actualWidth);
    console.log('Actual Image Height:', actualHeight);
  } else {
    console.error('Image element not found in the DOM');
  }
}

说明：

offsetWidth 和 offsetHeight: 返回元素的实际显示尺寸，包括内边距和边框。

clientWidth 和 clientHeight: 返回元素的宽高，不包括边框，但包括内边距。

可以根据需要选择使用哪种属性。如果只是想获取纯内容区域的大小，clientWidth 和 clientHeight 可能更适合。如果需要包含边框，则使用 offsetWidth 和 offsetHeight。