数学公式

PreviousNext
公式元素公式工具栏按钮公式元素公式工具栏按钮
Loading...

功能特性

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

套件使用

安装

最快捷的方式是使用MathKit套件，它包含预配置的EquationPlugin和InlineEquationPlugin以及Plate UI组件。

添加套件

将套件添加到插件中:

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

手动配置

安装

pnpm add @platejs/math

添加插件

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

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

配置插件

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

import { EquationPlugin, InlineEquationPlugin } from '@platejs/math/react';
import { createPlateEditor } from 'platejs/react';
import { EquationElement, InlineEquationElement } from '@/components/ui/equation-node';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件,
    EquationPlugin.withComponent(EquationElement),
    InlineEquationPlugin.withComponent(InlineEquationElement),
  ],
});

添加工具栏按钮

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

Plate Plus

插件

EquationPlugin

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

InlineEquationPlugin

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

转换方法

tf.insert.equation

OptionsInsertNodesOptions

    插入节点的转换选项

tf.insert.inlineEquation

插入一个行内公式。

Parameters

  • texExpression optional string

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

  • options optional InsertNodesOptions

    插入节点的转换选项

类型定义

TEquationElement

interface TEquationElement extends TElement {
  texExpression: string;
}
DateEquation