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

Question

我正尝试向使用froala编辑器反应组件呈现的元素注册一些事件侦听器。按照文档中的建议，我正在将froala config中的'潜在'事件监听器传递给它。

这里是我想实现

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'));