Shopware 6.5 App：自定义CMS元素编辑器预览失效问题排查

一、DOM结构代码的正确位置 #

你提供的这段DOM结构是CMS块的编辑器渲染模板，需要放在你的App插件的以下位置：

• 若使用Twig模板：<你的App根目录>/src/Resources/app/administration/src/module/sw-cms/blocks/[你的块分类]/swag-image-text-reversed/swag-image-text-reversed.html.twig
• 若使用Vue单文件组件：放在对应.vue文件的<template>标签内

同时要确保你的块定义文件（block.json）里，component字段指向的组件已正确关联这个模板。

二、编辑器预览失效的常见遗漏项 #

• 未完成编辑器组件注册
  在插件的main.js中导入块的注册文件：

  import './module/sw-cms/blocks/text-image/swag-image-text-reversed';
  

  并在块的注册文件（如swag-image-text-reversed/index.js）中完成组件与插槽的注册：

  Shopware.Service('cmsService').registerCmsBlock({
      name: 'swag-image-text-reversed',
      label: '图文反转布局',
      category: 'text-image',
      component: 'sw-cms-block-swag-image-text-reversed',
      slots: {
          left: 'text',
          right: 'image'
      }
  });
  

• 缺少编辑器端样式
  编辑器内的块需要基础样式才能正常显示（比如高度、布局），在对应的SCSS文件中添加：

  .sw-cms-block-swag-image-text-reversed-component {
      display: flex;
      gap: 1.25rem;
      padding: 1rem;
      .sw-cms-slot {
          flex: 1;
          min-height: 6.25rem;
          background-color: #f6f6f6;
          border: 1px dashed #ccc;
          border-radius: 4px;
      }
  }
  

  无样式时元素可能因高度为0而无法被看到。
• 插槽定义与模板不匹配
  确保block.json中定义的slots名称，与模板里sw-cms-slot的类名后缀完全对应（比如sw-cms-slot-left对应slot名left），否则插槽无法被识别，预览会异常。

三、快速排查步骤 #

1. 打开浏览器控制台，检查是否有组件未找到、路径错误等JS报错
2. 核对块定义文件与注册代码中的组件名、插槽名是否一致
3. 确认编辑器模板文件的路径在插件配置中已正确加载
4. 检查编辑器端的样式文件是否已导入并生效

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