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

Question

我正在尝试向使用 froala 编辑器反应组件呈现的元素注册一些事件侦听器。我正在按照文档中的建议在 froala 配置中传递我的 'potential' 事件侦听器。

这是我想要实现的目标

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

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

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

javascript

jquery

reactjs

froala