Question

我正在使用TinyMCE 5.0.2（自行托管），并通过官方TinyMCE React Component添加了编辑器。我已将编辑器置于使用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'));

Answer 1

在TinyMCE中，有5个弹出窗口位于连接到主体末端的元素内部。计算它们的位置以使其在打开时与编辑器容器对齐。

我对React Modal并不熟悉，但是关于样式的某些事情很可能会干扰我们的位置计算。您可以创建示例页面供我们调查（也许使用react modal演示页面之一）吗？

如果您可以使用很棒的示例页面记录github票证，则这似乎是一个错误。

TinyMCE-当编辑器处于模式时，子菜单显示在屏幕顶部

1 个答案: