富文本编辑器深度话题

// 1. 修改 Schema,允许 table 的 cell 里再放 table
const customTableCell = TableCell.extend({
  content: 'block+'  // 原本是 'block+',关键是允许 block 类型里包含 table
})

// 2. 注册时确保 table 在全局节点里可用,cell 的 content 自动允许
import { Table } from '@tiptap/extension-table'
import { TableCell } from '@tiptap/extension-table-cell'

const editor = new Editor({
  extensions: [
    StarterKit,
    Table.configure({ allowTableNodeSelection: true }),
    // 用自定义的 cell 替换默认的
    customTableCell,
    TableRow,
    TableHeader,
  ],
  content: '<table>...</table>'
})

// 3. 嵌套表格的 Tab 键导航:外层 Tab 到边界时,进入内层表格
// 需要重写 handleKeyDown,判断当前 selection 在哪个层级

// 自定义扩展:拦截粘贴
const PasteCleaner = Extension.create({
  name: 'pasteCleaner',

  // 处理粘贴的 HTML
  addProseMirrorPlugins() {
    return [
      new Plugin({
        props: {
          // 粘贴 HTML 时调用
          transformPastedHTML(html) {
            return cleanWordHTML(html)
          },
          // 粘贴纯文本/片段时也处理
          transformPasted(slice) {
            return filterSlice(slice, allowedMarks)
          }
        }
      })
    ]
  }
})

function cleanWordHTML(html) {
  return html
    // 删 Word 条件注释垃圾
    .replace(/<!--\[if[\s\S]*?endif\]-->/g, '')
    // 删 mso 开头的 style 属性
    .replace(/style="[^"]*mso-[^"]*"/g, '')
    // 删 Word 特有的 class
    .replace(/class="Mso[^"]*"/g, '')
    // 把 <o:p> 等 Office 标签删掉
    .replace(/<\/?o:[^>]*>/g, '')
}

// 用 Schema 强约束:不在白名单的标签/属性,ProseMirror 自动丢弃