Slate富文本编辑器教程：如何将内容保存到数据库-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00429/article/details/148360223

Slate富文本编辑器教程：如何将内容保存到数据库

slate A completely customizable framework for building rich text editors. (Currently in beta.) 项目地址: https://gitcode.com/gh_mirrors/sl/slate

前言

在开发富文本编辑器应用时，内容持久化是一个核心需求。本文将详细介绍如何在Slate富文本编辑器中实现内容保存功能，从基本的本地存储到自定义序列化方案，帮助开发者构建具有持久化能力的编辑器应用。

基础保存实现

初始设置

首先，我们创建一个基本的Slate编辑器组件：

const initialValue = [
  {
    type: 'paragraph',
    children: [{ text: '初始段落文本内容' }],
  },
]

const App = () => {
  const [editor] = useState(() => withReact(createEditor()))

  return (
    <Slate editor={editor} initialValue={initialValue}>
      <Editable />
    </Slate>
  )
}

这个基础版本在页面刷新后会丢失所有编辑内容，因为它没有实现任何保存机制。

添加保存功能

为了保存编辑内容，我们需要利用Slate的onChange回调：

const App = () => {
  const [editor] = useState(() => withReact(createEditor()))

  return (
    <Slate
      editor={editor}
      initialValue={initialValue}
      onChange={value => {
        // 检查是否是内容变更而非选区变化
        const isContentChange = editor.operations.some(
          op => op.type !== 'set_selection'
        )
        if (isContentChange) {
          // 将内容保存到本地存储
          const content = JSON.stringify(value)
          localStorage.setItem('editorContent', content)
        }
      }}
    >
      <Editable />
    </Slate>
  )
}

实现持久化加载

为了在页面刷新后恢复内容，我们需要从本地存储读取初始值：

const App = () => {
  const [editor] = useState(() => withReact(createEditor()))
  
  // 从本地存储读取初始内容
  const initialValue = useMemo(
    () =>
      JSON.parse(localStorage.getItem('editorContent')) || [
        {
          type: 'paragraph',
          children: [{ text: '默认段落文本' }],
        },
      ],
    []
  )

  return (
    <Slate editor={editor} initialValue={initialValue}>
      <Editable />
    </Slate>
  )
}

高级序列化方案

自定义序列化格式

Slate支持将内容序列化为任意格式。以下是实现纯文本序列化的示例：

import { Node } from 'slate'

// 序列化为纯文本
const serializeToText = value => {
  return value
    .map(node => Node.string(node))
    .join('\n')
}

// 从纯文本反序列化
const deserializeFromText = text => {
  return text.split('\n').map(line => ({
    children: [{ text: line }],
  }))
}

const App = () => {
  const [editor] = useState(() => withReact(createEditor()))
  
  // 使用自定义反序列化
  const initialValue = useMemo(
    () => deserializeFromText(localStorage.getItem('editorContent') || ''),
    []
  )

  return (
    <Slate
      editor={editor}
      initialValue={initialValue}
      onChange={value => {
        const isContentChange = editor.operations.some(
          op => op.type !== 'set_selection'
        )
        if (isContentChange) {
          // 使用自定义序列化保存
          localStorage.setItem('editorContent', serializeToText(value))
        }
      }}
    >
      <Editable />
    </Slate>
  )
}

格式选择建议

虽然Slate支持多种序列化格式，但开发者需要考虑以下因素：

JSON格式：保持Slate原生数据结构，处理简单但存储空间较大
纯文本：体积小但会丢失格式信息
Markdown/HTML：平衡体积和格式保留，但转换成本较高

对于大多数应用，推荐使用Slate原生JSON格式，除非有明确的存储空间或兼容性需求。

外部内容更新

有时需要从外部更新编辑器内容，可以通过直接操作编辑器实例实现：

/**
 * 重置编辑器内容
 * @param {Editor} editor - Slate编辑器实例
 * @param {Object} options - 配置选项
 * @param {Node|Node[]} [options.nodes] - 新节点内容
 * @param {Location} [options.at] - 新选区位置
 */
function resetEditorContent(editor, options = {}) {
  // 清空现有内容
  editor.children.forEach((node, index) => {
    editor.apply({ type: 'remove_node', path: [index], node })
  })

  // 插入新内容
  if (options.nodes) {
    const nodes = Array.isArray(options.nodes) 
      ? options.nodes 
      : [options.nodes]
    
    nodes.forEach((node, index) => {
      editor.apply({ type: 'insert_node', path: [index], node })
    })
  }

  // 设置选区
  const selection = options.at && Point.isPoint(options.at)
    ? options.at
    : Editor.end(editor, [])
  
  if (selection) {
    Transforms.select(editor, selection)
  }
}