Angular9集成GrapesJS使用CKEditor4时如何固定工具栏位置？

解决方案 #

针对你遇到的CKEditor4工具栏定位异常、挂载外部节点失焦的问题，可通过以下三种可落地的方案解决：

方案1：将工具栏挂载到GrapesJS画布iframe内部（最稳定） #

失焦问题的核心原因是：CKEditor的文本选区在GrapesJS的iframe文档上下文内，你将工具栏挂载到主文档的DOM节点（iframe外部）时，点击工具栏会触发主文档的焦点事件，自动丢失iframe内的文本选区。
你可以直接把工具栏挂载到iframe内部的固定定位容器中，操作步骤如下：

1. 先初始化GrapesJS，拿到画布iframe的DOM文档对象
2. 在iframe的body顶部插入一个固定定位的工具栏容器
3. 将CKEditor的sharedSpaces.top配置直接指向这个iframe内的DOM元素，而非主文档的节点ID

对应修改后的代码片段：

// GrapesJS初始化完成后执行以下逻辑
this.grapesJsEditor.on('load', () => {
  const iframeDoc = this.grapesJsEditor.Canvas.getDocument();
  // 创建iframe内部的工具栏容器
  const ckTbContainer = iframeDoc.createElement('div');
  ckTbContainer.id = 'ckeditor-toolbar';
  // 固定在iframe顶部，不会随滚动消失
  ckTbContainer.style.cssText = `
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    z-index: 9999;
    padding: 6px 10px;
    border-bottom: 1px solid #e5e7eb;
  `;
  iframeDoc.body.prepend(ckTbContainer);

  // 重写CKEditor配置，指向内部容器
  this.grapesJsEditor.Config.pluginsOpts['gjs-plugin-ckeditor'].options.sharedSpaces = {
    top: ckTbContainer
  };
});

// 原初始化配置中删除sharedSpaces和toolbarLocation的字符串配置即可

方案2：CSS强制固定浮动工具栏（改动最小） #

如果不想调整iframe内部结构，可以直接用CSS覆盖CKEditor默认浮动工具栏的定位规则，强制固定到页面指定位置，完全跳过CKEditor自身的位置计算逻辑：

/* 适配CKEditor4浮动工具栏的默认类名 */
.cke_float {
  position: fixed !important;
  /* 自行调整位置，比如固定在GrapesJS编辑器顶部 */
  top: 16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 99999 !important;
  /* 禁止CKEditor动态修改位置 */
  top: unset !important;
  left: unset !important;
}

可配合GrapesJS的组件选中事件控制显隐：仅当用户选中文本类组件时显示工具栏，其余场景隐藏，体验更顺畅。

方案3：自定义CKEditor实例化逻辑（灵活度最高） #

grapesjs-plugin-ckeditor支持自定义CKEditor实例创建逻辑，你可以完全接管工具栏的挂载和定位，避开默认逻辑的限制：

pluginsOpts: {
  'gjs-plugin-ckeditor': {
    customInit: (el, config) => {
      // 自行实例化CKEditor，控制工具栏挂载
      return CKEDITOR.replace(el, {
        ...config,
        // 你的自定义定位、挂载逻辑
      });
    }
  }
}

内容的提问来源于stack exchange，提问作者SnowOwl27