Unable to attach event listeners to element rendered in froala rich text editor

Question

I am trying to register some event listeners to elements rendered using froala editor react component. I am passing my 'potential' event listener in froala config as suggested in the documentation.

Here is what i am trying to achieve

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

here the callback method 'eventListnerSubscriber ' upon event mouseover is not getting invoked.

Anything i am doing wrong?

Answer 1

Most likely you are doing something wrong. Here is how I tested it and works fine:

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