Neos CMS 7：如何让内容元素在Neos UI中不可编辑？

针对你需要让文章底部的相关文章滑块Fusion组件完全不可内联编辑、不可选中，并和非内联可编辑节点行为一致的需求，可以按以下步骤处理：

1. 禁用内联编辑 #

在Fusion组件定义中，直接移除或禁用内联编辑的包装逻辑，这样Neos后台就不会给该组件添加编辑手柄和工具栏：

方法一：使用ContentElementWrapping禁用 #

prototype(Your.Site:Component.RelatedArticlesSlider) < prototype(Neos.Neos:ContentComponent) {
    # 禁用内联编辑包装
    @process.contentElementWrapping = ${Neos.Fusion.render('Neos.Neos:ContentElementWrapping', {
        content: value,
        node: node,
        disable: true
    })}

    # 组件原有配置
    items = ${q(node).find('[instanceof Your.Site:Document.Article]').limit(4).get()}
    # ...其他组件内容
}

方法二：直接移除包装处理 #

如果不需要任何内联编辑相关的渲染，也可以直接清空包装处理：

prototype(Your.Site:Component.RelatedArticlesSlider) {
    @process.contentElementWrapping = null

    # 组件内容...
}

2. 禁止元素选中 #

通过CSS阻止用户选中滑块区域的内容，同时可选择禁用鼠标交互来贴近非内联节点的行为：

给滑块组件的根容器添加类名（比如related-articles-slider），然后在样式文件中添加：

.related-articles-slider {
    /* 禁止文本选中 */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    /* 可选：完全阻止鼠标交互，避免误点 */
    pointer-events: none;
}

3. 匹配非内联节点的后台行为 #

如果需要在后台编辑模式下更贴近非内联节点的视觉和交互表现，可以根据后台状态添加额外样式：

在Fusion中动态添加后台专属类：

prototype(Your.Site:Component.RelatedArticlesSlider) {
    class = ${'related-articles-slider' + (Neos.Neos:Backend.isInBackend() ? ' backend-non-editable' : '')}

    @process.contentElementWrapping = null

    # 组件内容...
}

对应的CSS：

.related-articles-slider.backend-non-editable {
    opacity: 0.9; /* 视觉上区分可编辑元素 */
    cursor: default; /* 鼠标指针变为默认样式 */
}

这样处理后，该滑块组件在后台编辑模式下既不会触发内联编辑，也无法被选中，行为完全和非内联可编辑节点一致。

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