Tinymce编辑器手风琴菜单插件async异步实现问题咨询

需求概述 #

开发TinyMCE编辑器的手风琴菜单插件，核心需求如下：

• 打开弹出表单后，先设置手风琴菜单条目，再设置对应菜单内容
• 处理完指定数量的表单后立即将数据传递到编辑器，无需等待所有表单处理完成

实现方案（基于async/await） #

1. 重构表单处理逻辑为异步函数 #

将表单的条目和内容设置逻辑封装成异步函数，强制保证操作顺序（先条目后内容）：

// 异步处理单个手风琴项的条目与内容
async function processSingleAccordionItem(formData) {
  // 第一步：异步设置手风琴菜单条目（可替换为实际DOM操作/接口请求）
  const processedTitle = await setupAccordionTitle(formData.title);
  // 第二步：异步设置对应菜单内容
  const processedContent = await setupAccordionContent(formData.content);
  
  return { title: processedTitle, content: processedContent };
}

// 模拟条目设置的异步操作（实际开发中替换为真实逻辑）
function setupAccordionTitle(title) {
  return new Promise(resolve => {
    // 比如插入标题到临时DOM容器、校验格式等操作
    setTimeout(() => resolve(title.trim()), 100);
  });
}

// 模拟内容设置的异步操作
function setupAccordionContent(content) {
  return new Promise(resolve => {
    // 比如过滤HTML标签、渲染富文本内容等操作
    setTimeout(() => resolve(content), 100);
  });
}

2. 分批处理表单并实时传递数据 #

设置分批阈值（比如每处理2个表单就提交一次），遍历表单数据时，每完成一批就立即调用编辑器的插入/更新方法：

async function processFormsInBatches(formList, batchSize = 2) {
  const currentBatch = [];
  
  for (let i = 0; i < formList.length; i++) {
    // 异步处理单个表单项
    const item = await processSingleAccordionItem(formList[i]);
    currentBatch.push(item);
    
    // 达到分批阈值，或处理到最后一项时，立即传递数据到编辑器
    if ((i + 1) % batchSize === 0 || i === formList.length - 1) {
      await sendDataToEditor(currentBatch);
      currentBatch.length = 0; // 清空当前批次数据
    }
  }
}

// 异步传递数据到TinyMCE编辑器
async function sendDataToEditor(items) {
  return new Promise(resolve => {
    // 生成手风琴HTML结构
    const accordionHtml = buildAccordionHtml(items);
    // 插入到编辑器中
    tinymce.activeEditor.insertContent(accordionHtml);
    resolve();
  });
}

// 生成手风琴HTML的辅助函数
function buildAccordionHtml(items) {
  return items.map(item => `
    <div class="accordion-item">
      <h3 class="accordion-header">${item.title}</h3>
      <div class="accordion-body">${item.content}</div>
    </div>
  `).join('');
}

3. 在弹窗提交事件中触发异步分批处理 #

修改弹出表单的确认按钮逻辑，调用异步分批处理函数：

// 弹窗确认按钮点击事件
document.getElementById('submit-accordion-btn').addEventListener('click', async () => {
  // 收集所有表单数据（根据实际DOM结构调整）
  const formList = Array.from(document.querySelectorAll('.accordion-form')).map(form => ({
    title: form.querySelector('.title-input').value,
    content: form.querySelector('.content-textarea').value
  }));
  
  // 启动异步分批处理，这里设置每2个表单提交一次
  await processFormsInBatches(formList, 2);
  
  // 处理完成后关闭弹窗
  tinymce.activeEditor.windowManager.close();
});

关键说明 #

• async/await保证顺序执行：通过await强制每个手风琴项的条目设置完成后，再处理内容，避免异步操作导致的顺序混乱
• 分批提交逻辑：通过索引判断批量阈值，每完成指定数量的表单就立即插入编辑器，无需等待所有表单处理完毕
• Promise封装异步操作：将DOM操作、格式校验等耗时逻辑封装为Promise，适配async/await的异步流程

内容的提问来源于stack exchange，提问作者Ismail ÇİLOĞLU