CODEWITHSUNDEEP
tinymcereactjstinymce-4
Andreas
Andreas

Reputation: 2153

Reactjs together with TinyMCE editor code plugin

I'm using Reactjs together with the tinyMCE 4.1.10 html editor (together with the code plugin) and bootsrap css + js elements. A fairly working setup after a few quirks with the editor have been removed (manual destruction if the parent element unmounts)

Now the question: The textarea input of the code plugin does not receive any focus, click or key events and is basically dissabled. Setting the value via javascript works just fine, but it does not function as a normal html input.

It is opened as the following:

  1. datatable as react components
  2. opens bootsrap modal as react component
  3. initializes tinymce on textareas inside of the modal
  4. loads the code plugin (which itself then is not accepting any kind of input anymore)

My initilization of the editor looks like this:

componentDidMount: function(){
    tinymce.init({
          selector: '.widget-tinymce'
        , height : 200
        , resize : true
        , plugins : 'code'
    })
}

My guess would be, that react.js is somehow blocking or intersepting the events here. If I remove the react modal DOM, it is just working fine.

Does anybody has an idea, what is causing this or how to simply debug it further?

Thx a lot!

Upvotes: 3

Views: 4958

Answers (4)

SaimumIslam27
SaimumIslam27

Reputation: 1188

Material UI: disable Dialog's enforce focus by adding a prop disableEnforceFocus={true} and optionally disableAutoFocus={ true}

Upvotes: 0

SaimumIslam27
SaimumIslam27

Reputation: 1188

if you are using Material UI. disable Material UI Dialog's enforce focus by adding a prop disableEnforceFocus={true} and optionally disableAutoFocus={ true}

Upvotes: 1

Andreas
Andreas

Reputation: 2153

Alright, so it turned out that bootstrap modals javascript is somehow highjacking this. In favor of saving some time I decided not to dig realy into this but just to create my own modal js inside of the jsx.

Aparently there is also React Bootstrap, but it looks at the moment to much beta for me in order to take this additional dependency in.

The final code looks like this, in case it becomes handy at some point:

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">&times;</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>
            );
        }
  })

Best wishes

Andreas

Upvotes: 0

Chris Jaynes
Chris Jaynes

Reputation: 2907

What does your html/jsx look like in your component?

My guess is that react might be treating your input as a Controlled Component

If you're setting the value attribute when you render, you'll want to wait, and do that via props or state instead.

Upvotes: 0

Related Questions