如何获取当前Froala编辑器ID？点击自定义按钮后从this提取#jobEditor

嘿，我来帮你搞定这两个Froala编辑器的问题～

要获取Froala编辑器的ID，核心是找到编辑器对应的根DOM元素，再提取它的id属性。这里有两种常见场景的实现方式：

• 初始化后直接获取：如果你已经保存了编辑器实例的引用，直接通过实例的$el属性（指向编辑器根DOM元素的jQuery对象）提取ID即可：

// 初始化编辑器并保存实例
const myEditor = new FroalaEditor('#jobEditor');

// 获取编辑器ID
const editorId = myEditor.$el[0].id;
console.log(editorId); // 输出：jobEditor

• 在编辑器事件中获取：比如在编辑器初始化完成的回调里，this会指向编辑器实例，同样通过$el来获取：

new FroalaEditor('#jobEditor', {
  events: {
    initialized: function() {
      const editorId = this.$el[0].id;
      console.log('编辑器ID是：', editorId);
    }
  }
});

你提到点击自定义按钮时console.log(this)显示出目标DIV的ID（#jobEditor），这里分几种情况来处理：

1. 如果this是编辑器的根DOM元素本身（比如<div id="jobEditor">这个DOM节点），直接取它的id属性就好，注意这个属性是不带#的：

click: function() {
  const editorId = this.id;
  console.log(editorId); // 输出：jobEditor
}

2. 如果this是Froala编辑器的实例对象，通过实例的$el属性（jQuery对象）获取DOM元素的ID：

click: function() {
  // 方式1：访问原生DOM元素的id属性
  const editorId = this.$el[0].id;
  // 方式2：使用jQuery的attr方法
  const editorId = this.$el.attr('id');
  console.log(editorId); // 输出：jobEditor
}

3. 如果this是jQuery包装后的DOM元素，可以用jQuery的attr方法，或者转成原生DOM元素后取id：

click: function() {
  const editorId = this.attr('id'); // jQuery方式
  // 或者
  const editorId = this[0].id; // 转成原生DOM元素后取id
  console.log(editorId);
}

内容的提问来源于stack exchange，提问作者Shawn