无法将事件侦听器附加到在Froala Rich Text编辑器中呈现的元素上

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