javascript - 无法将事件监听器附加到 froala 富文本编辑器中呈现的元素

Question

我正在尝试将一些事件监听器注册到使用 froala 编辑器 react 组件呈现的元素。我按照文档中的建议在 froala 配置中传递我的“潜在”事件监听器。

这就是我想要实现的目标

events : {
        'froalaEditor.initialized': function(e, editor) {
            var elements = document.getElementsByClassName('some-class-id-that-i-know-exists');
            for (var i=0; i< elements.length ; i++) {
                elements[i].addEventListener('mouseover', eventListnerSubscriber(elements[i]), true);
            }
        }
    }

 // outside config
function eventListnerSubscriber(element) {
      console.log(element);
}

此处，事件鼠标悬停时的回调方法“eventListnerSubscriber”未被调用。

我做错了什么吗？

Answer 1

很可能您做错了什么。这是我测试的方法并且工作正常:

// Render Froala Editor component.
class EditorComponent extends React.Component {
  constructor() {
    super();

    this.state = {
      content: '<div class="foo">asdasdasd</div>'
    };

    this.config = {
      events : {
        'froalaEditor.initialized': function(e, editor) {
          var elements = document.getElementsByClassName('foo');
          for (var i=0; i< elements.length ; i++) {
            elements[i].addEventListener('mouseover', function () {
              console.log ('foo')
            }, true);
          }
        }
      }
    }

    this.handleModelChange = this.handleModelChange.bind(this);
  }

  handleModelChange (model) {
    this.setState({
      content: model
    });
  }

  render () {
    return(
      <div className="sample">
        <h2>Full Featured</h2>
        <FroalaEditor
          model={this.state.content}
          onModelChange={this.handleModelChange}
          config={this.config}
        />
        <h4>Rendered Content:</h4>
        <FroalaEditorView
          model={this.state.content}
        />
      </div>
    );
  }

}

ReactDOM.render(<EditorComponent/>, document.getElementById('editor'));