Core API

@frame-flex/core 包提供了框架无关的核心编辑器类和扩展。

Editor 类

构造函数

new Editor(element: HTMLElement, options?: EditorOptions)

创建一个新的编辑器实例。

参数

• element: HTMLElement - 编辑器要挂载到的 DOM 元素
• options: EditorOptions - 编辑器配置选项（可选）

EditorOptions

interface EditorOptions {
  // 初始内容（HTML 字符串或 JSON 对象）
  content?: string | JSONContent;

  // 是否可编辑
  editable?: boolean;

  // 自动聚焦
  autofocus?: boolean | 'start' | 'end' | 'all';

  // 内容更新回调
  onUpdate?: (content: JSONContent) => void;

  // 选区更新回调
  onSelectionUpdate?: () => void;

  // 焦点回调
  onFocus?: () => void;

  // 失焦回调
  onBlur?: () => void;

  // 自定义扩展
  extensions?: Extension[];
}

实例方法

getHTML()

getHTML(): string

获取编辑器内容的 HTML 字符串。

返回值: string - HTML 内容

示例:

const html = editor.getHTML();
console.log(html); // '<h1>Hello</h1><p>World</p>'

getJSON()

getJSON(): JSONContent

获取编辑器内容的 JSON 对象（TipTap 格式）。

返回值: JSONContent - JSON 格式的内容

示例:

const json = editor.getJSON();
console.log(json);
// {
//   type: 'doc',
//   content: [
//     { type: 'heading', attrs: { level: 1 }, content: [...] },
//     { type: 'paragraph', content: [...] }
//   ]
// }

getText()

getText(options?: { blockSeparator?: string; textSerializers?: Record<string, TextSerializer> }): string

获取编辑器的纯文本内容。

参数:

• options.blockSeparator: string - 块级元素之间的分隔符（默认: \n\n）
• options.textSerializers: Record<string, TextSerializer> - 自定义文本序列化器

返回值: string - 纯文本内容

示例:

const text = editor.getText();
console.log(text); // 'Hello\n\nWorld'

setContent()

setContent(content: string | JSONContent): void

设置编辑器内容。

参数:

• content: string | JSONContent - 新的内容（HTML 字符串或 JSON 对象）

示例:

// 设置 HTML 内容
editor.setContent('<h1>New Content</h1>');

// 设置 JSON 内容
editor.setContent({
  type: 'doc',
  content: [
    { type: 'heading', attrs: { level: 1 }, content: [{ type: 'text', text: 'New Content' }] }
  ]
});

setEditable()

setEditable(editable: boolean): void

设置编辑器是否可编辑。

参数:

• editable: boolean - 是否可编辑

示例:

editor.setEditable(false); // 设置为只读
editor.setEditable(true);  // 设置为可编辑

focus()

focus(position?: 'start' | 'end' | 'all' | number): void

使编辑器获得焦点。

参数:

• position: 'start' | 'end' | 'all' | number - 焦点位置（可选）
  • 'start': 内容开始位置
  • 'end': 内容结束位置
  • 'all': 选中所有内容
  • number: 指定位置

示例:

editor.focus('end');  // 焦点移到末尾
editor.focus('start'); // 焦点移到开头
editor.focus(10);     // 焦点移到位置 10

destroy()

destroy(): void

销毁编辑器实例，清理所有事件监听器和 DOM 引用。

示例:

editor.destroy();

扩展

LinkExtension

自定义链接扩展，支持多种链接类型。

import { LinkExtension } from '@frame-flex/core';

特性:

• 支持普通 URL 链接
• 支持内部资源链接
• 支持文件链接
• 可配置链接打开方式

MathExtension

数学公式扩展（需要 KaTeX）。

import { MathInline, MathBlock } from '@frame-flex/core';

特性:

• 行内公式 (MathInline)
• 块级公式 (MathBlock)
• KaTeX 渲染
• LaTeX 语法支持

CodeBlockExtension

代码块扩展（可选 lowlight 支持语法高亮）。

import { CodeBlockExtension } from '@frame-flex/core';

特性:

• 多语言支持
• 语法高亮（需要 lowlight）
• 代码行号
• 复制代码功能

NestedContainerExtension

嵌套容器扩展。

import { NestedContainerExtension } from '@frame-flex/core';

特性:

• 可嵌套的容器节点
• 支持拖拽排序
• 自定义样式

资源注册系统

ResourceRegistry

import { ResourceRegistry } from '@frame-flex/core';

// 注册资源
ResourceRegistry.register({
  id: 'my-resource',
  type: 'style',
  content: '.my-class { color: red; }',
  priority: 1
});

// 获取资源
const resource = ResourceRegistry.get('my-resource');

// 获取所有资源
const allResources = ResourceRegistry.getAll();

// 移除资源
ResourceRegistry.unregister('my-resource');

类型定义

JSONContent

interface JSONContent {
  type: string;
  attrs?: Record<string, any>;
  content?: JSONContent[];
  marks?: Array<{
    type: string;
    attrs?: Record<string, any>;
  }>;
  text?: string;
}

TextSerializer

type TextSerializer = (props: {
  node: Node;
  pos: number;
  parent: Node;
  index: number;
}) => string;

下一步

• Vue API - Vue 包 API 参考
• Exporters API - 导出工具 API 参考
• 扩展开发 - 如何开发自定义扩展