TinyMCE - Подменю отображаются в верхней части экрана, когда редактор находится в модальном - PullRequest
Новая
       29

TinyMCE - Подменю отображаются в верхней части экрана, когда редактор находится в модальном

0 голосов
/ 19 апреля 2019

Я использую TinyMCE 5.0.2 (самостоятельно) и добавляю редактор через официальный TinyMCE React Component .Я поместил свой редактор в модал, созданный с помощью React Modal .Проблема в том, что все подменю отображаются вверху экрана (исправлено), а не относительно пункта меню.

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

enter image description here

Я запустил здесь JSFiddle, но не могу заставить ReactTinymceПринимаем реквизиты так же, как в обычном проекте на скрипке.(Метод ReactTinyMCE onEditorChange не срабатывает и значение не устанавливается, я полагаю, что я не правильно его использую, но иногда странные скрипки ...)

https://jsfiddle.net/cleanshooter/9qutaz3o/60/

const modalStyle = {
  content : {
    top                   : '25%',
    left                  : '25%',
    right                 : 'auto',
    bottom                : 'auto'
  }
};

class View extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
      isModalOpen: false,
      content: 'Init'
    };
    this.updateContent = this.updateContent.bind(this);
  }

  openModalHandler() {
    this.setState({isModalOpen: true});
  }

  closeModalHandler() {
    this.setState({isModalOpen: false});
  }

  updateContent(value) {
    console.log('changed: ', value);
    this.setState({content: value})
  }

    render() {

    return (
    <div>
      <h2>TinyMCE in a React-Modal Example</h2>
      <button onClick={this.openModalHandler.bind(this)}>Open modal</button>
      <ReactModal 
        isOpen={this.state.isModalOpen}
        style={modalStyle}
        onRequestClose={this.closeModalHandler.bind(this)}>
        <ReactTinymce
          value={this.state.content}
          onEditorChange={value => this.updateContent(value)}
        />
        <button onClick={this.closeModalHandler.bind(this)}>Close</button>
      </ReactModal>
    </div>
    )
  }
}

ReactModal.setAppElement('#app')
ReactDOM.render(<View name="React" />, document.getElementById('app'));

1 Ответ

0 голосов
/ 30 апреля 2019

В TinyMCE 5 всплывающих окон находятся внутри элемента, прикрепленного к концу тела.Их позиция рассчитывается так, чтобы они совпадали с контейнером редактора при их открытии.

Я не знаком с React Modal, но вполне возможно, что что-то в стилях мешает нашим расчетам позиции.Можете ли вы создать образец страницы, которую мы могли бы исследовать (возможно, с помощью одной из демонстрационных модальных реакций)?

Похоже, это ошибка, если вы можете зарегистрировать билет GitHub с образцом страницы, что было бы здорово.

...