如何通过JavaScript获取Elementor编辑器中当前激活Widget的widgetModel以访问其属性

我太懂你这种在Elementor的JS命名空间里摸不着头脑的痛苦了！之前我也折腾过好久——扒DOM元素的data-setting、翻panelView的层级，结果要么拿到的是旧数据，要么把Section/Column当成Widget实例，完全不靠谱。后来终于摸清楚了Elementor官方提供的稳定方法，分两种场景给你说：

一、实时监听Widget选中事件（最稳妥的方式） #

如果你需要在用户切换选中Widget时自动获取最新实例，用Elementor官方的钩子是最优解，这也是兼容性最好的方法，不会因为Elementor小版本更新就失效。

直接上代码：

// 注册Widget选中的监听钩子
elementor.hooks.addAction('elementor/editor/element/selected', function(selection) {
  // selection对象里包含了当前选中元素的model和view实例
  const currentWidgetModel = selection.model;

  // 先确认当前选中的是Widget（排除Section/Column这类容器元素）
  if (currentWidgetModel.get('widgetType')) {
    // 用官方方法getSetting()获取单个属性，会自动处理默认值
    const widgetTitle = currentWidgetModel.getSetting('title');
    console.log('当前Widget的标题：', widgetTitle);

    // 如果你想查看所有设置，可以直接取settings对象
    const allSettings = currentWidgetModel.get('settings')._attributes;
    console.log('当前Widget的全部设置：', allSettings);
  }
});

这个钩子的好处是，只要用户在编辑器里点击选中任意Widget，回调函数就会触发，实时拿到对应的widgetModel，完全不用担心拿错实例。

二、主动获取当前激活的Widget模型（按需调用） #

如果不需要实时监听，而是想在某个自定义操作（比如点击你扩展里的按钮）时主动获取当前选中的Widget，可以用这个方法：

// 封装成函数，方便调用
function getCurrentActiveWidgetModel() {
  // 从Elementor编辑器实例中获取当前选中的视图
  const selectedElementView = elementor.editor.getCurrentView();
  
  // 校验：确认是Widget类型的元素，避免拿到Section/Column
  if (selectedElementView?.model?.get('widgetType')) {
    return selectedElementView.model;
  }
  
  // 如果当前选中的不是Widget，返回null
  return null;
}

// 调用示例
const activeWidget = getCurrentActiveWidgetModel();
if (activeWidget) {
  // 获取Widget类型
  const widgetType = activeWidget.get('widgetType');
  console.log('当前激活的Widget类型：', widgetType);
  
  // 获取你自定义控件的值，把your_custom_control_name换成你的控件名
  const customControlValue = activeWidget.getSetting('your_custom_control_name');
  console.log('自定义控件的值：', customControlValue);
}

几个关键注意事项 #

• 千万别用jQuery去扒DOM的data-setting属性！Elementor的DOM结构随时可能变，而且DOM里的是渲染后的值，和widgetModel里的原始设置可能不同，很容易出问题。
• 尽量用官方的getSetting()方法获取属性，而不是直接访问model.get('settings')._attributes，因为getSetting()会自动处理控件的默认值，即使用户没修改过控件，也能返回正确的默认值。
• 如果要修改Widget的设置，记得用model.setSetting('key', value)，而不是直接修改settings对象，这样Elementor会自动同步修改到编辑器面板和预览区，不会出现数据不一致的情况。

内容来源于stack exchange