MarkDown编辑器地址在这
https://github.com/HarryChen0506/react-markdown-editor-lite
现象:
编辑器的全屏,是通过fixed定位实现的
但是,编辑器放在Modal中,Modal的外层样式使用了transform属性,导致内部的fixed定位失效
transform属性会让fixed属性降级,降成absolute的效果
transform的特殊效果:
https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/
https://zhuanlan.zhihu.com/p/95021620
解决:
手动写个类去继承Editor,然后再用createPortal渲染到body上
import MdEditor from 'react-markdown-editor-lite';
import ReactDOM from 'react-dom';
export default class extends MdEditor {
render() {
const {fullScreen} = this.state;
if (fullScreen) {
return ReactDOM.createPortal(
super.render(),
document.body
);
}
return super.render();
}
}
还需要加个样式
.rc-md-editor.full{
z-index: 99999!important;
}
然后使用这个改过的Editor,正常使用即可
网友评论