数学公式

PreviousNext

Enables the insertion and rendering of LaTeX equations in your editor.

公式元素公式工具栏按钮公式元素公式工具栏按钮
Loading…

功能特性

  • 支持LaTeX语法编写复杂数学表达式
  • 提供行内公式和块级公式两种格式
  • 使用KaTeX实时渲染公式
  • 便捷的公式编辑和导航功能

套件使用

安装

最快捷的方式是使用MathKit套件，它包含预配置的EquationPlugin和InlineEquationPlugin、对应的 $...$ 与 $$ input rules，以及Plate UI组件。

'use client';
 
import { MathRules } from '@platejs/math';
import { EquationPlugin, InlineEquationPlugin } from '@platejs/math/react';
 
import {
  EquationElement,
  InlineEquationElement,
} from '@/components/ui/equation-node';
 
export const MathKit = [
  InlineEquationPlugin.configure({
    inputRules: [MathRules.markdown({ variant: '$' })],
    node: {
      component: InlineEquationElement,
    },
  }),
  EquationPlugin.configure({
    inputRules: [MathRules.markdown({ on: 'break', variant: '$$' })],
    node: {
      component: EquationElement,
    },
  }),
];
'use client';
 
import { MathRules } from '@platejs/math';
import { EquationPlugin, InlineEquationPlugin } from '@platejs/math/react';
 
import {
  EquationElement,
  InlineEquationElement,
} from '@/components/ui/equation-node';
 
export const MathKit = [
  InlineEquationPlugin.configure({
    inputRules: [MathRules.markdown({ variant: '$' })],
    node: {
      component: InlineEquationElement,
    },
  }),
  EquationPlugin.configure({
    inputRules: [MathRules.markdown({ on: 'break', variant: '$$' })],
    node: {
      component: EquationElement,
    },
  }),
];

添加套件

将套件添加到插件中:

import { createPlateEditor } from 'platejs/react';
import { MathKit } from '@/components/editor/plugins/math-kit';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件,
    ...MathKit,
  ],
});
import { createPlateEditor } from 'platejs/react';
import { MathKit } from '@/components/editor/plugins/math-kit';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件,
    ...MathKit,
  ],
});

手动配置

安装

pnpm add @platejs/math
pnpm add @platejs/math

添加插件

在创建编辑器时将公式插件包含到Plate插件数组中。

import { MathRules } from '@platejs/math';
import { EquationPlugin, InlineEquationPlugin } from '@platejs/math/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件,
    EquationPlugin,
    InlineEquationPlugin,
  ],
});
import { MathRules } from '@platejs/math';
import { EquationPlugin, InlineEquationPlugin } from '@platejs/math/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件,
    EquationPlugin,
    InlineEquationPlugin,
  ],
});

配置插件

使用自定义组件和 input rules 配置插件来渲染公式元素。

import { MathRules } from '@platejs/math';
import { EquationPlugin, InlineEquationPlugin } from '@platejs/math/react';
import { createPlateEditor } from 'platejs/react';
import { EquationElement, InlineEquationElement } from '@/components/ui/equation-node';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件,
    InlineEquationPlugin.configure({
      inputRules: [MathRules.markdown({ variant: '$' })],
      node: {
        component: InlineEquationElement,
      },
    }),
    EquationPlugin.configure({
      inputRules: [MathRules.markdown({ on: 'break', variant: '$$' })],
      node: {
        component: EquationElement,
      },
    }),
  ],
});
import { MathRules } from '@platejs/math';
import { EquationPlugin, InlineEquationPlugin } from '@platejs/math/react';
import { createPlateEditor } from 'platejs/react';
import { EquationElement, InlineEquationElement } from '@/components/ui/equation-node';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件,
    InlineEquationPlugin.configure({
      inputRules: [MathRules.markdown({ variant: '$' })],
      node: {
        component: InlineEquationElement,
      },
    }),
    EquationPlugin.configure({
      inputRules: [MathRules.markdown({ on: 'break', variant: '$$' })],
      node: {
        component: EquationElement,
      },
    }),
  ],
});
  • node.component：指定EquationElement渲染块级公式，InlineEquationElement渲染行内公式。
  • MathRules.markdown({ variant: '$' })：启用行内公式 Markdown 快捷输入。
  • MathRules.markdown({ variant: '$$', on: 'break' | 'match' })：启用块级公式 Markdown 快捷输入，并显式选择提交时机。

完整运行时模型请参阅 Plugin Input Rules。

添加工具栏按钮

您可以在工具栏中添加EquationToolbarButton来插入公式。

Plate Plus

  • Mark text as equation from the toolbar
  • Insert equation from slash command
  • Beautifully crafted UI

插件

EquationPlugin

用于块级公式元素的插件。

InlineEquationPlugin

用于行内公式元素的插件。

转换方法

tf.insert.equation

OptionsInsertNodesOptions

    插入节点的转换选项

tf.insert.inlineEquation

插入一个行内公式。

Parameters

    要插入的LaTeX表达式。如未提供则为空公式。

    插入节点的转换选项

类型定义

TEquationElement

interface TEquationElement extends TElement {
  texExpression: string;
}
interface TEquationElement extends TElement {
  texExpression: string;
}