froalaリッチテキストエディタでレンダリングされた要素にイベントリスナーを添付できません

Question

froala editor reactコンポーネントを使用してレンダリングされた要素にいくつかのイベントリスナーを登録しようとしています。私はドキュメントで提案されているように、froala設定で私の '潜在的な'イベントリスナーを渡しています。ここで

は私がイベントのマウスオーバー時にコールバックメソッド「eventListnerSubscriber」が起動していないここで

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

を達成しようとしていますものです。

私は間違っていますか？

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