Блог

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

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

Я запустил здесь 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'));
 

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

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

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