0

我正在使用 TinyMCE 5.0.2（自托管）并通过 Official 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'));
4

1 回答 1

0

在 TinyMCE 5 中，弹出窗口位于主体末端的一个元素内。它们的位置被计算为在它们打开时与编辑器容器对齐。

我对 React Modal 不熟悉，但样式很可能会干扰我们的位置计算。您可以创建一个示例页面供我们调查（也许使用反应模式演示页面之一）？

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

于 2019-04-30T01:00:05.667 回答