WPS-JSAPI自定义编号时，如何动态设置段落编号格式并实时预览效果？

Question

**如何在WPS-JSAPI中动态设置段落编号格式并实时预览效果？** 在使用WPS-JSAPI自定义编号时，如何动态调整段落编号格式（如“1.”、“(1)”或“-”）并实时预览效果是一个常见问题。开发者通常需要通过`paragraph.setList`方法设置列表样式，但如何结合用户输入动态修改编号格式，并即时反映在文档中？关键在于利用WPS-JSAPI的事件监听机制，捕捉用户操作（如输入或选择变化），然后调用`document.render`更新视图。同时，需确保编号规则与段落层级正确匹配，避免格式错乱。例如，通过`paragraph.getLevel`获取当前段落层级，结合自定义规则生成编号字符串。此过程需注意性能优化，避免频繁渲染影响用户体验。

Answer 1

1. 初步理解：WPS-JSAPI中的段落编号格式设置

在WPS-JSAPI中，动态设置段落编号格式并实时预览效果的核心在于对`paragraph.setList`方法的灵活运用。此方法允许开发者为段落指定列表样式（如编号或项目符号）。例如：

const paragraph = document.getActiveParagraph();
paragraph.setList({ type: 'number', format: '1.' });

上述代码将当前活动段落设置为编号格式“1.”。然而，要实现动态调整和实时预览，需要结合事件监听机制捕捉用户输入变化。

2. 深入分析：动态调整编号格式的关键步骤

为了实现动态调整编号格式，可以分为以下几个关键步骤：

1. 监听用户输入或选择变化事件。
2. 根据用户选择生成新的编号格式规则。
3. 调用`paragraph.setList`方法应用新规则。
4. 通过`document.render`更新视图以反映更改。

以下是一个简单的示例，展示如何监听用户输入并动态调整编号格式：

document.on('input', (event) => {
    const activeParagraph = document.getActiveParagraph();
    const level = activeParagraph.getLevel();
    let format = '';

    if (level === 0) {
        format = '1.';
    } else if (level === 1) {
        format = '(a)';
    }

    activeParagraph.setList({ type: 'number', format });
    document.render();
});

3. 进阶优化：确保层级与编号规则匹配

在复杂文档中，段落可能具有多个层级。使用`paragraph.getLevel`方法获取当前段落的层级后，可以根据层级定义不同的编号规则。例如：

层级	编号格式
0	1.
1	(a)
2	i.

通过表格定义不同层级的编号格式，可以确保文档结构清晰且格式一致。

4. 性能优化：避免频繁渲染影响体验

实时预览功能可能会导致频繁调用`document.render`，从而影响性能。为解决这一问题，可以采用防抖（debounce）技术延迟渲染操作。例如：

let debounceTimer;
document.on('input', (event) => {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
        const activeParagraph = document.getActiveParagraph();
        const level = activeParagraph.getLevel();
        let format = '';

        if (level === 0) {
            format = '1.';
        } else if (level === 1) {
            format = '(a)';
        }

        activeParagraph.setList({ type: 'number', format });
        document.render();
    }, 300); // 延迟300毫秒
});

通过防抖技术，可以显著减少不必要的渲染操作，提升用户体验。

5. 流程图：动态设置段落编号格式的整体流程

graph TD;
            A[监听用户输入] --> B[获取当前段落];
            B --> C[判断段落层级];
            C --> D[根据层级生成编号规则];
            D --> E[应用编号规则];
            E --> F[更新视图];

以上流程图展示了从监听用户输入到更新视图的完整过程，帮助开发者更好地理解其实现逻辑。