我正在使用Reactjs和tinyMCE 4.1.10 html编辑器(连同代码插件)和bootsrap css + js元素。在编辑器出现一些怪癖后,一个相当有效的设置已被删除(manual destruction if the parent element unmounts)
现在的问题是:代码插件的textarea输入没有收到任何焦点,点击或键事件,基本上是不可理解的。通过javascript设置值工作正常,但它不能作为普通的html输入。
按以下方式打开:
我的编辑器启动如下:
componentDidMount: function(){
tinymce.init({
selector: '.widget-tinymce'
, height : 200
, resize : true
, plugins : 'code'
})
}
我的猜测是,react.js在某种程度上阻止或阻止了这里的事件。如果我删除react modal DOM,它就可以正常工作。
是否有人有想法,是什么导致了这个或如何进一步简单地调试它?
很多!
答案 0 :(得分:0)
答案 1 :(得分:0)
好吧,事实证明,引导模态javascript在某种程度上是劫持这个。为了节省一些时间,我决定不再深入研究这个,而只是在jsx中创建我自己的模态js。
显然还有React Bootstrap,但是为了获得额外的依赖性,它会为我提供很多测试版。
最终代码看起来像这样,以防它在某些时候变得方便:
Modal = React.createClass({
show: function() {
appBody.addClass('modal-open');
$(this.getDOMNode()).css('opacity', 0).show().scrollTop(0).animate({opacity: 1}, 500);
}
, hide: function(e){
if (e) e.stopPropagation();
if (!e || $(e.target).data('close') == true) {
appBody.removeClass('modal-open');
$(this.getDOMNode()).animate({opacity: 0}, 300, function(){
$(this).hide();
});
}
}
, showLoading: function(){
this.refs.loader.show();
}
, hideLoading: function(){
this.refs.loader.hide();
}
, render: function() {
return (
<div className="modal overlay" tabIndex="-1" role="dialog" data-close="true" onClick={this.hide}>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" onClick={this.hide} data-close="true" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 className="modal-title" id="myModalLabel">{this.props.title}</h4>
</div>
<div className="modal-body" id="overlay-body">
{this.props.children}
<AjaxLoader ref="loader"/>
</div>
</div>
</div>
</div>
);
}
})
祝福
安德烈亚斯