Question

我正在尝试向使用froala编辑器反应组件呈现的元素注册一些事件侦听器。我正按照文档中的建议在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'));

无法将事件侦听器附加到froala富文本编辑器

1 个答案: