如何扩展Sitecore插入链接功能：为Item链接添加前置图标

我之前刚好处理过类似的Sitecore RTE（富文本编辑器）扩展需求，给你梳理一套可行的落地方案，分前端拦截、后端复用逻辑、UI渲染这几个核心步骤：

1. 拦截Sitecore插入链接的提交事件 #

Sitecore后台的插入链接弹窗是基于内置的对话框组件，我们需要先拦截「插入」按钮的默认行为，拿到选中的Sitecore Item ID后再走自定义逻辑。

用后台已加载的jQuery来实现事件监听（Sitecore后台默认引入了jQuery）：

// 监听插入链接弹窗的主提交按钮
$(document).on('click', '.sc-dialog .sc-button-primary', function(e) {
    // 判断当前弹窗是否是插入Sitecore Item链接的类型
    const isSitecoreItemDialog = $(this).closest('.sc-dialog').find('.sc-linktype-sitecore').is(':visible');
    if (!isSitecoreItemDialog) return;

    // 阻止默认提交行为
    e.preventDefault();
    e.stopPropagation();

    // 获取选中的Sitecore Item ID
    const itemId = $(this).closest('.sc-dialog').find('.sc-itemselector-value').val();
    if (!itemId) {
        // 没有选中Item则执行默认插入
        defaultInsertAction();
        return;
    }

    // 调用后端接口获取图标信息
    $.ajax({
        url: '/api/custom/linkicon',
        type: 'POST',
        data: { itemId: itemId },
        success: handleIconResponse,
        error: defaultInsertAction
    });
});

// 处理后端返回的图标数据
function handleIconResponse(response) {
    if (!response?.iconUrl) {
        defaultInsertAction();
        return;
    }

    // 构造带图标的链接HTML并插入到编辑器
    const linkText = $('.sc-dialog .sc-link-text').val();
    const itemUrl = $('.sc-dialog .sc-link-url').val();
    const target = $('.sc-dialog .sc-link-target').val() ? `target="${$('.sc-dialog .sc-link-target').val()}"` : '';
    
    const iconHtml = `<img src="${response.iconUrl}" alt="Item Icon" class="sc-item-link-icon" style="width:16px;height:16px;vertical-align:middle;margin-right:4px;" />`;
    const linkHtml = `<a href="${itemUrl}" ${target}>${iconHtml}${linkText}</a>`;

    // 插入到富文本编辑器
    const editor = Sitecore.PageModes.TinyMCE.getEditor();
    editor.insertContent(linkHtml);

    // 关闭弹窗
    $('.sc-dialog').dialog('close');
}

// 执行默认的插入链接逻辑（降级用）
function defaultInsertAction() {
    $('.sc-dialog .sc-button-primary').off('click').click();
}

2. 后端接口复用已有逻辑 #

基于你已有的Item图标处理逻辑，封装一个简单的API接口，接收Item ID并返回图标URL：

using Sitecore;
using Sitecore.Data.Items;
using Sitecore.Mvc.Controllers;
using System.Web.Mvc;

public class CustomLinkController : SitecoreController
{
    // 注入你已有的图标处理服务
    private readonly IItemIconService _iconService;

    public CustomLinkController(IItemIconService iconService)
    {
        _iconService = iconService;
    }

    [HttpPost]
    public JsonResult GetItemIcon(string itemId)
    {
        if (string.IsNullOrEmpty(itemId))
            return Json(new { iconUrl = null });

        Item targetItem = Context.Database.GetItem(ID.Parse(itemId));
        if (targetItem == null)
            return Json(new { iconUrl = null });

        // 调用你已有的逻辑获取图标URL
        string iconUrl = _iconService.GetIconPath(targetItem);
        return Json(new { iconUrl = iconUrl });
    }
}

记得在Sitecore配置里注册这个控制器的路由，确保接口能正常访问。

3. 兼容编辑与发布模式 #

为了让图标在后台编辑模式和前端发布页面都能正常显示，添加全局CSS样式：

/* 统一图标样式，避免编辑模式下样式错乱 */
.sc-item-link-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 4px;
}

关键注意事项 #

• 脚本注入：把前端的JavaScript代码通过Sitecore的PageExtenders或者自定义的后台脚本注入器加载，确保在RTE页面初始化时执行。
• Sitecore版本兼容：如果是Sitecore 9.3+的React重构后台，需要调整事件监听的选择器（比如弹窗的类名可能有变化），可以用浏览器开发者工具定位准确的元素。
• 权限处理：后端接口要确保当前编辑用户有访问目标Item的权限，避免因权限问题导致图标获取失败。

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