富文本工具栏的全屏按钮和 Ant Design Blazor 的 Modal 有冲突

[dashiell-zhang]

非常感谢你开发的这个富文本编辑器，我发现它工具栏中的全屏按钮和 Ant Design Blazor 的 Modal 弹出框会有冲突，点击全屏按钮时会直接导致 Modal 消失，并且 编辑器也并没有实现全屏，会造成屏幕出现一个 遮罩层，但是没有任何内容

<Modal Title="添加文章" Style="width:50%;" Visible="@isShowCreateArticle" OnCancel="()=>isShowCreateArticle=false" Footer="@footer">
    <Form Model="@createArticle" LabelColSpan="2" WrapperColSpan="22">

        <Tabs Type="@TabType.Card" Style="height:550px">

            <TabPane Key="1" Tab="基本信息">
                <FormItem Label="所属栏目">
                    <Select DataSource="@selectCategoryList" DefaultValue="@(Guid.Empty)" ValueName="@nameof(dtoSelect.Value)" LabelName="@nameof(dtoSelect.Label)" DisabledName="@nameof(dtoSelect.IsDisabled)" @bind-Value="@context.CategoryId" style="width: 190px"></Select>
                </FormItem>

                <FormItem Label="标题">
                    <Input Placeholder="请输入标题" @bind-Value="@context.Title" style="width: 30em" />
                </FormItem>

                <FormItem Label="是否显示">
                    <Switch @bind-Value="@context.IsDisplay" CheckedChildren="是" UnCheckedChildren="否" />
                </FormItem>

                <FormItem Label="是否推荐">
                    <Switch @bind-Value="@context.IsRecommend" CheckedChildren="是" UnCheckedChildren="否" />
                </FormItem>

                <FormItem Label="排序">
                    <Input Placeholder="请输入排序值" Type="number" @bind-Value="@context.Sort" style="width: 190px" />
                </FormItem>

            </TabPane>

            <TabPane Key="2" Tab="详细内容">
                <FormItem Label="摘要">
                    <TextArea ShowCount MaxLength=255 Placeholder="不填写则自动截取内容前255字符" @bind-Value="@context.Abstract" MinRows="4" MaxRows="6" style="width:50em;min-height:100px" />
                </FormItem>

                <FormItem Label="内容">
                    <UEditor.Editor @ref="editor" @bind-Value="@context.Content" @bind-Html="@context.Content" Height="500px" Width="700px" />
                </FormItem>

            </TabPane>

        </Tabs>

    </Form>
</Modal>

[zxyao145]

Hello @berkerdong， UEditor.Editor在进行全屏的时候，会为所有的父级元素（递归父级，直到 body）设置 position: static; ，这会改变 Model 内 .ant-modal-wrap 元素本身的 position: fixed;，导致 Modal 显示在视图外。

如果要修复次问题，在点击全屏按钮后，需要通过JS进行以下两步设置：

1. 将 .ant-modal-wrap 的 position 改回 fixed（移除DOM中style中的 position 设置）
2. 请将 class 为 edui-editor edui-notadd 的元素的 top 、left 设置为 0。

即使如此，也会有些显示的问题，这是由于 UEditor 与 AntDesign 的样式无法兼容引起的。由于 UE 递归设置父级 position: static; 的特点，建议不要使用全屏功能，或者将 UE 放置在接近body的层级，不要放置在DOM树的较深层。

[dashiell-zhang]

好吧，希望有一天可以完美兼容吧

[dashiell-zhang]

这个问题搞定了，实现思路如下： 首先在模态框的 Class 加一个标记，这里我用的是 ueditorBody，如下

然后调整 ueditor.all.js 中的如下内容 while (container.tagName != "BODY") { 调整为 while (container.className.includes('ueditorBody') == false) {  setViewportOffset 方法中的 var offsetLeft = offset.left - rect.left; 调整为 var offsetLeft = offset.left - rect.left - 8.5;  setHeight: function (height, notSetHeight) { 方法中的 this.body.style.height = height + 'px'; 直接删除  ueditor.css 调整如下 .edui-default .edui-dialog-shadow { 添加 box-sizing:unset;  然后就可以完美实现 Ueditor 全屏功能和 Blazor 组件的搭配了。