在Sitecore富文本字段中嵌入Kaltura视频遇到问题

问题现象 #

将Kaltura视频嵌入Sitecore富文本字段后无法加载，但相同代码在独立HTML文件中可正常播放，使用的嵌入代码如下：

<div id="kaltura_player" style="width: 540px; height: 540px;"></div>
<script src="https://cdnapisec.kaltura.com/embedIframeJs"></script>
<script>
    kWidget.embed({
        "targetId": "kaltura_player",
        "wid": "_xxxxxxx",
        "uiconf_id": xxxxx,
        "flashvars": {},
        "cache_st": xxxxxxxx,
        "entry_id": "xxxxxxx"
    });
</script>

已完成的排查操作 #

• 将代码添加至富文本字段的HTML编辑器
• 确认脚本未被浏览器或服务器拦截
• 尝试使用原始HTML字段替代富文本字段
• 检查浏览器控制台日志，未发现报错信息

疑问 #

1. 是否有人成功在Sitecore富文本或HTML字段中嵌入Kaltura视频？
2. 是否需要特定配置以允许这些字段中的JavaScript执行？
3. 创建Sitecore自定义渲染或组件是否是更优方案？

解决方案与经验分享 #

富文本/HTML字段嵌入的可行性 #

不少开发者成功在Sitecore HTML字段中嵌入Kaltura视频，但富文本字段因内置HTML清理机制，会自动过滤掉<script>标签，这是导致视频无法加载的核心原因——你的脚本代码被Sitecore移除，kWidget对象无法完成初始化。

必要的配置调整 #

若要在HTML字段中允许JavaScript执行，需调整Sitecore安全配置：

• 登录Sitecore后台，进入**/sitecore/system/Settings/Security/Html Editor Profiles**，找到当前使用的编辑器配置文件
• 在Allowed Controls或Valid Elements中，添加<script>标签的允许规则，包含src、type等必要属性
• 检查Sitecore.config或ShowConfig.aspx中的HtmlEditor.DefaultProfile设置，确保应用的是修改后的配置文件
• 注意：开放<script>标签存在安全风险，建议仅对特定模板、字段启用，且严格管控内容来源

自定义组件的优势 #

创建Sitecore自定义渲染或组件是更稳妥、易维护的方案，原因如下：

• 避开HTML字段的脚本过滤限制，直接在渲染代码中嵌入Kaltura初始化逻辑
• 可将视频参数（如entry_id、uiconf_id）设为可编辑字段，内容编辑人员无需手动修改代码即可维护视频信息
• 统一控制视频样式、加载逻辑，便于后续迭代更新与批量调整
• 降低安全风险，避免富文本字段中恶意脚本注入的可能

自定义组件实现示例（视图渲染） #

创建一个视图文件KalturaVideo.cshtml：

@model YourProject.Models.KalturaVideoModel

<div id="kaltura-player-@Model.PlayerId" style="width: @Model.Width; height: @Model.Height;"></div>
<script src="https://cdnapisec.kaltura.com/embedIframeJs"></script>
<script>
    kWidget.embed({
        targetId: "kaltura-player-@Model.PlayerId",
        wid: "@Model.Wid",
        uiconf_id: @Model.UiconfId,
        entry_id: "@Model.EntryId"
    });
</script>

对应的模型类：

public class KalturaVideoModel
{
    public Guid PlayerId { get; set; } = Guid.NewGuid();
    public string EntryId { get; set; }
    public string UiconfId { get; set; }
    public string Wid { get; set; }
    public string Width { get; set; } = "540px";
    public string Height { get; set; } = "540px";
}

在Sitecore中创建对应的视图渲染，关联该视图与模型，即可在页面中添加并配置Kaltura视频组件。

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