数学公式

Files

components/demo.tsx

'use client';

import * as React from 'react';

import { Plate, usePlateEditor } from 'platejs/react';

import { EditorKit } from '@/components/editor/editor-kit';
import { Editor, EditorContainer } from '@/components/ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = usePlateEditor({
    plugins: EditorKit,
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

LaTeX equations with inline and block formats.

equation-demo

功能特性

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

套件使用

安装

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

'use client';

import { EquationPlugin, InlineEquationPlugin } from '@platejs/math/react';

import {
  EquationElement,
  InlineEquationElement,
} from '@/components/ui/equation-node';

export const MathKit = [
  InlineEquationPlugin.withComponent(InlineEquationElement),
  EquationPlugin.withComponent(EquationElement),
];

EquationElement: 渲染块级公式元素
InlineEquationElement: 渲染行内公式元素

添加套件

将套件添加到插件中:

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),
  ],
});

withComponent: 指定EquationElement渲染块级公式，InlineEquationElement渲染行内公式。

添加工具栏按钮

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

Plate Plus

Get the code

equation

插件

`EquationPlugin`

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

`InlineEquationPlugin`

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

转换方法

`tf.insert.equation`

OptionsInsertNodesOptions

Collapse all

插入节点的转换选项

`tf.insert.inlineEquation`

插入一个行内公式。

Parameters