如何在Tip Tap编辑器中2秒无输入时显示跳动点动画？

核心实现思路 #

• 监听编辑器的输入更新事件，每次输入操作触发时重置定时器
• 当定时器触发（2秒无输入）时，显示跳动点动画
• 动画展示一段时间后，自动插入预设的静态语句到编辑器中

具体代码实现（以Vue 3 + Tip Tap为例） #

模板结构 #

<template>
  <div class="tiptap-wrapper">
    <editor-content :editor="editor" />
    <!-- 跳动点动画容器 -->
    <div v-if="showLoader" class="typing-loader">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</template>

动画样式 #

.typing-loader {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  margin-top: 8px;
  background-color: #f5f5f5;
  border-radius: 14px;
}

.typing-loader span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #777;
  animation: bounce 1.2s infinite ease-in-out;
}

.typing-loader span:nth-child(1) {
  animation-delay: -0.4s;
}

.typing-loader span:nth-child(2) {
  animation-delay: -0.2s;
}

@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(0.8);
  }
  40% {
    transform: scale(1);
  }
}

编辑器逻辑 #

import { useEditor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
import { ref, onUnmounted } from 'vue'

export default {
  components: {
    EditorContent
  },
  setup() {
    let idleTimer = null
    const showLoader = ref(false)
    const presetText = '这里是要插入的静态语句' // 替换为你的目标内容

    const editor = useEditor({
      extensions: [StarterKit],
      content: '<p>开始输入内容...</p>',
      onUpdate() {
        // 每次输入时清除旧定时器，隐藏动画
        if (idleTimer) clearTimeout(idleTimer)
        showLoader.value = false
        
        // 启动新的闲置定时器
        idleTimer = setTimeout(() => {
          showLoader.value = true
          // 动画展示1.5秒后插入静态语句
          setTimeout(() => {
            showLoader.value = false
            editor.value.commands.insertContent(`<p>${presetText}</p>`)
          }, 1500)
        }, 2000)
      }
    })

    // 组件销毁时清理定时器
    onUnmounted(() => {
      if (idleTimer) clearTimeout(idleTimer)
    })

    return {
      editor,
      showLoader
    }
  }
}

注意事项 #

• 定时器清理：必须在每次输入时清除旧定时器，防止多个定时器叠加触发错误逻辑
• 动画自定义：可以根据需求调整跳动点的大小、颜色、动画周期，以及容器的样式
• 语句插入：使用Tip Tap官方的insertContent方法确保内容正确插入到编辑器的光标位置（或末尾）

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