美文网首页
react-markdown-editor-lite 全屏bug

react-markdown-editor-lite 全屏bug

作者: 每天洗脸刷幸运值 | 来源:发表于2020-12-11 16:55 被阅读0次

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,正常使用即可

相关文章

网友评论

      本文标题:react-markdown-editor-lite 全屏bug

      本文链接:https://www.haomeiwen.com/subject/huojgktx.html