AEM RTE列表插件自定义：修改有序列表默认输出格式

刚好之前帮人解决过类似的AEM RTE列表自定义需求，要修改默认的列表输出结构，其实核心就是通过覆盖OOTB（开箱即用）的List插件配置和自定义它的渲染逻辑来实现，下面是一步步的具体操作：

步骤1：复制OOTB List插件配置到项目的apps目录 #

AEM官方不建议直接修改/libs下的内容，所以我们需要先把系统默认的List插件配置复制到项目的/apps目录下：

• 找到路径：/libs/cq/gui/components/authoring/richtext/plugins/list
• 复制整个list节点到你项目的对应路径，比如：/apps/your-project/components/authoring/richtext/plugins/list

步骤2：编写自定义JavaScript覆盖List插件的渲染逻辑 #

创建一个项目专属的clientlib（比如/apps/your-project/clientlibs/richtext-custom），编写JS代码来重写List插件生成HTML的逻辑，让它输出你想要的结构：

(function($) {
    // 确保在RTE加载完成后执行
    $(document).on('foundation-contentloaded', function() {
        // 获取RTE的List插件实例
        const listPlugin = Granite.author.ui.RichTextEditor.plugins['list'];
        if (!listPlugin) return;

        // 覆盖原有的列表渲染方法
        listPlugin.renderList = function(type, items) {
            // 定义你需要的类名和样式
            const listClass = 'some-class';
            const fontStyle = 'font-family: Arial; font-size: 14px;'; // 替换成你的目标样式
            const listTag = type === 'ordered' ? 'ol' : 'ul';
            
            let listHtml = `<${listTag} class="${listClass}">`;
            // 遍历列表项生成HTML
            items.forEach(item => {
                listHtml += `<li><font style="${fontStyle}">${item.text}</font></li>`;
            });
            listHtml += `</${listTag}>`;
            
            return listHtml;
        };
    });
})(jQuery);

配置这个clientlib的categories为cq.authoring.dialog，确保它在RTE的核心JS之后加载。

步骤3：在组件Dialog中配置RTE使用自定义List插件 #

打开你要应用这个修改的组件的dialog.xml，找到RTE的配置节点，把List插件的路径指向你刚才复制到/apps下的插件：

<rte jcr:primaryType="nt:unstructured">
    <plugins jcr:primaryType="nt:unstructured">
        <!-- 配置自定义List插件 -->
        <list
            jcr:primaryType="nt:unstructured"
            path="/apps/your-project/components/authoring/richtext/plugins/list"/>
        <!-- 其他RTE插件配置（比如bold、italic等） -->
    </plugins>
</rte>

步骤4：测试验证 #

1. 打开组件的编辑对话框，在RTE中插入有序或无序列表
2. 切换到RTE的HTML视图，检查生成的代码是否符合预期：

• Item 1
• Item 2

小提示：如果你的AEM版本是6.5或更高，要注意clientlib的加载顺序，确保自定义JS在OOTB的RTE核心脚本之后执行，避免找不到插件实例。另外，<font>标签是HTML4的标签，现在更推荐用<span>加类名的方式来控制样式，如果你不需要兼容旧系统，可以考虑替换成<span class="your-font-class">。

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