在 Fancy Box 中运行 CKEditor：编辑器弹出窗口/覆盖集中在 fancybox 覆盖后面
Posted
技术标签:
【中文标题】在 Fancy Box 中运行 CKEditor：编辑器弹出窗口/覆盖集中在 fancybox 覆盖后面【英文标题】：Running CKEditor in Fancy Box: Editor popups/overlays focus behind fancybox overlay 【发布时间】：2020-03-16 11:36:42 【问题描述】：我正在使用花哨的盒子在一个内嵌的 div 中打开各种编辑功能。我使用ajax 来获取div 的内容，将其移动到div 中，并在Fancybox 中打开该div。大多数情况下效果很好。一些编辑块中包含 ckeditor 并且加载正常并且大部分工作......但是 ckeditor 弹出/覆盖（如从 word 粘贴，颜色选择器或图像工具）在 fancybox 窗口下方打开。可能是 z-index 问题，但不知道如何解决：
花式盒子代码如下：
function openEditBlock()
$.fancybox.open(
src : '#editBlock',
type : 'inline',
touch: false
);
CK 编辑器代码如下：
var editor1 = CKEDITOR.replace('editor1_content',
extraPlugins: 'stylesheetparser', // load the plugin
contentsCss: '../css/editor_cmsPages.css', // load custom stylesheet
stylesSet: [], // Do not load the default Styles configuration.
height: '480px',
width: '780px',
);
CKFinder.setupCKEditor(editor1, 'wysfind/' ) ;
【问题讨论】：
【参考方案1】：fancybox 元素的 z-index 值从 99992 到 99995；但是 1) ckeditor 将对话框元素放置在内容之外，作为 <body> 的最后一个子元素和 2) 使用非常低的 z-index 起始值，例如，颜色选择器默认为 10006。
幸运的是，ckeditor 允许配置 z-indexes，定位 config.js 文件并将 baseFloatZIndex 的值更改为类似 100001 的值（参见 https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-baseFloatZIndex）
【讨论】：
完美运行。谢谢。以上是关于在 Fancy Box 中运行 CKEditor：编辑器弹出窗口/覆盖集中在 fancybox 覆盖后面的主要内容，如果未能解决你的问题，请参考以下文章
Fancy Product Designer插件0day漏洞被利用，用户超过17000个