Redactor 2/3 WYSIWYG编辑器添加/编辑<dl><dt><dd>标签方法咨询

我刚好研究过Redactor 2和3里定义列表的实现方式，下面分原生配置和插件方案给你详细说明，两种方式都能满足需求：

一、原生配置方案（无需额外插件） #

Redactor默认没把定义列表放到工具栏里，但可以通过自定义配置把这些标签加进去，不同版本的配置语法略有区别：

Redactor 3 #

你可以用formatAdd配置项添加定义列表相关的格式，同时把对应的按钮加到工具栏里。直接上代码示例：

Redactor('#editor', {
    // 添加自定义格式
    formatAdd: {
        'dl': {
            title: '定义列表容器',
            api: 'module.format.block',
            args: ['dl']
        },
        'dt': {
            title: '定义术语',
            api: 'module.format.block',
            args: ['dt']
        },
        'dd': {
            title: '定义描述',
            api: 'module.format.block',
            args: ['dd']
        }
    },
    // 把自定义按钮加到工具栏
    toolbar: {
        items: ['format', 'bold', 'italic', 'dl', 'dt', 'dd']
    }
});

配置好之后，工具栏就会出现对应的按钮。操作的时候建议先插入<dl>容器，再在里面添加<dt>和<dd>，这样结构更规范。

Redactor 2 #

Redactor 2的配置逻辑差不多，只是用formattingAdd和buttonsAdd这两个项：

$('#editor').redactor({
    // 添加自定义格式
    formattingAdd: {
        'dl': {
            title: '定义列表容器',
            tag: 'dl',
            class: ''
        },
        'dt': {
            title: '定义术语',
            tag: 'dt',
            class: ''
        },
        'dd': {
            title: '定义描述',
            tag: 'dd',
            class: ''
        }
    },
    // 把自定义按钮插入工具栏（|用来分隔原有按钮和新按钮）
    buttonsAdd: ['|', 'dl', 'dt', 'dd']
});

设置完成后，你就能在工具栏或者格式下拉菜单里找到这些选项，选中内容点击按钮就能转换成对应的标签了。

二、插件方案（更便捷的操作） #

如果觉得手动添加容器和子标签太麻烦，想要一键插入完整的定义列表结构，可以自己写个简易插件，或者找社区现成的插件。这里给你一个自定义插件的示例（以Redactor 3为例）：

// 自定义定义列表插件
Redactor.add('plugin', 'dlinsert', {
    init: function() {
        // 给工具栏加一个新按钮
        this.app.toolbar.add('dlinsert', {
            title: '一键插入定义列表',
            // 这里可以替换成你自己的图标SVG代码，或者直接用文字
            icon: '<span>插入定义列表</span>',
            command: 'dlinsert.insert'
        });
    },
    insert: function() {
        // 创建完整的定义列表结构
        const dl = this.app.create.node('dl');
        const dt = this.app.create.node('dt', { text: '请输入术语' });
        const dd = this.app.create.node('dd', { text: '请输入描述' });
        
        dl.appendChild(dt);
        dl.appendChild(dd);
        
        // 插入到编辑器中
        this.app.insert.node(dl);
        // 把光标定位到描述文本末尾，方便直接编辑
        this.app.selection.setStart(dd, 6);
    }
});

// 初始化编辑器时加载插件
Redactor('#editor', {
    plugins: ['dlinsert'],
    toolbar: {
        items: ['dlinsert', 'bold', 'italic', 'link']
    }
});

这个插件会在工具栏加一个按钮，点击后直接插入包含一个术语和描述的完整定义列表，比手动添加高效很多。Redactor 2的插件写法类似，只是API细节略有不同，你可以参考官方的插件开发文档调整。

小提示 #

• 不管用哪种方式，都要确保配置代码和Redactor版本对应，避免语法错误。
• 如果需要美化定义列表的样式，直接写自定义CSS就行，Redactor不会影响前端的样式渲染。

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