Nuxt3中VueQuill提及模块窗口Resize时切换positioningStrategy失效

问题根源 #

1. 逻辑判断写反：你在onResize里的条件判断搞反了需求——当窗口宽度≥640px时，你把positioningStrategy设成了normal，但需求是此时用fixed；反之<640px时应该用normal，你却设成了fixed。
2. Quill实例销毁不彻底：你只是把quillInstance.value设为null，没有调用Quill的destroy()方法清理旧实例的DOM和内部状态，导致旧的模块配置依然生效。
3. 错误的数组索引调用：你在console.log里使用了modules[1]，但你的modules数组只有一个元素（mention模块在索引0），所以这条日志会输出undefined，让你误以为配置没更新，实际是日志代码写错了。
4. 冗余的模块注册操作：重复删除再注册模块完全没必要，Quill模块只需要注册一次即可，重复操作可能引发内部缓存问题。

修正后的代码 #

1. 修正窗口 resize 处理逻辑 #

const onResize = () => {
  windowWidth.value = window.innerWidth;

  const mentionModule = modules.find(module => module.name === 'mention');

  // 修正判断逻辑，匹配需求
  if (windowWidth.value >= 640) {
    mentionModule.options.positioningStrategy = 'fixed';
  } else {
    mentionModule.options.positioningStrategy = 'normal';
  }

  console.log('mention positioningStrategy:', mentionModule.options.positioningStrategy)

  // 跨阈值时重新初始化
  if ((previousWindowWidth.value < 640 && windowWidth.value >= 640) || 
      (previousWindowWidth.value >= 640 && windowWidth.value < 640)) {
    initializeQuill();
  }

  previousWindowWidth.value = windowWidth.value;
};

2. 完善编辑器初始化方法（正确销毁旧实例） #

const initializeQuill = () => {
  console.log('Initializing Quill...')

  // 正确销毁旧实例：先调用destroy清理DOM和状态
  if(quillInstance.value) {
    quillInstance.value.destroy();
    quillInstance.value = null;
    // 清空编辑器容器内容，避免残留
    const editorEl = document.querySelector(`#editor-${props.commentId}`);
    if (editorEl) editorEl.innerHTML = '';
  }

  quillInstance.value = new Quill(`#editor-${props.commentId}`, {
    theme: 'snow',
    modules: {
      toolbar: `#toolbar-${props.commentId}`,
      ...modules.reduce((acc, module) => ({ ...acc, [module.name]: module.options }), {}),
    }
  });

  quillInstance.value.focus();
  const length = quillInstance.value.getLength();
  quillInstance.value.setSelection(length, length);

  quillInstance.value.on('text-change', () => {
    content.value = quillInstance.value.root.innerHTML;
  });
};

3. 组件初始化时一次性注册模块 #

在组件的onMounted钩子中完成模块注册和初始化，避免重复操作：

onMounted(() => {
  // 仅注册一次模块
  modules.forEach(module => {
    Quill.register(`modules/${module.name}`, module.module, true);
  });
  // 初始化编辑器
  initializeQuill();
  // 添加resize监听
  window.addEventListener('resize', onResize);
});

onUnmounted(() => {
  // 清理监听和实例
  window.removeEventListener('resize', onResize);
  if(quillInstance.value) {
    quillInstance.value.destroy();
  }
});

关键说明 #

• 实例销毁：调用destroy()是Quill官方推荐的清理方式，它会移除编辑器的DOM元素、事件监听和内部状态，确保新实例能完全使用新配置。
• 模块注册：模块只需注册一次，重复注册不仅冗余，还可能导致Quill内部的模块缓存混乱。
• 逻辑修正：确保positioningStrategy的赋值和需求完全匹配，这是最容易忽略的低级错误。

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