Reactjs вместе с плагином кода редактора TinyMCE

Я использую Reactjs вместе с редактором HTMLM tinyMCE 4.1.10 (вместе с плагином кода) и элементами bootsrap css + js. Достаточно работающая настройка после удаления нескольких недочетов с редактором ( ручное уничтожение, если родительский элемент размонтируется)

Теперь вопрос: ввод текстовой области плагина кода не получает никакого фокуса, щелчка или ключевых событий и в основном отключен. Установка значения с помощью javascript работает просто отлично, но не работает как обычный ввод html.

Он открывается следующим образом:

  1. датируемые как реагирующие компоненты
  2. открывает мод начальной загрузки как компонент реакции
  3. инициализирует tinymce на textareas внутри модального
  4. загружает плагин кода (который сам по себе больше не принимает данные)

Моя инициализация редактора выглядит так:

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

Я думаю, что response.js каким-то образом блокирует или перехватывает события здесь. Если я уберу реагирующую модальную модель DOM, она работает нормально.

У кого-нибудь есть идея, что является причиной этого или как просто отладить это дальше?

Большое спасибо!

Источник

4 ответа

Решение

Итак, оказалось, что модальные загрузочные javascript каким-то образом взбесили это. Чтобы сэкономить время, я решил не копаться в этом, а просто создать свой собственный модальный js внутри jsx.

Судя по всему, есть и 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">&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>
            );
        }
  })

С наилучшими пожеланиями

Andreas

Источник

если вы используете интерфейс материалов. отключите принудительный фокус в диалоговом окне Material UI, добавив параметр disableEnforceFocus={true} и, при необходимости, disableAutoFocus={ true}

Источник

Как выглядит ваш html/jsx в вашем компоненте?

Я предполагаю, что реакция может рассматривать ваш вклад как контролируемый компонент

Если вы устанавливаете value Атрибут при рендеринге, вы захотите подождать и сделать это через реквизит или состояние вместо этого.

Источник

Материал пользовательского интерфейса: отключите принудительный фокус диалога, добавив свойство disableEnforceFocus={true} и , при необходимости, disableAutoFocus={ true}

Источник
Другие вопросы по тегам