CKEditor 生态系统文档
Search
Contribute to this guide
首页/CKEditor 5/功能

指南数学公式和化学式

MathType 是一款流行的数学和科学公式编辑器，具有经典和手写输入模式。您可以使用它在 CKEditor 5 内容中直接创建数学公式或化学式。

这是一个高级功能，需要在 CKEditor 5 商业许可证费用之上额外支付，并由我们的合作伙伴 Wiris 提供。如果您有任何反馈或问题，请联系 我们。

您也可以在官方 CKEditor 5 GitHub 存储库 中报告任何问题。

# 演示

要在下面的编辑器中创建数学公式或化学式，请单击工具栏中的 MathType MathType 或 ChemType ChemType 按钮。这将打开相应的对话框。

使用工具栏编写您的方程式或公式。您也可以随时点击 MathType 编辑器右侧的“进入手写模式”按钮切换到手写模式。

创建完科学内容后，点击“确定”按钮将公式插入编辑器。您也可以双击文档中的任何现有公式来编辑它们。

在初等代数中，**二次公式**是二次方程的解。

x equals fraction numerator negative b plus-or-minus square root of b squared minus 4 a c end root over denominator 2 a end fraction

**水由两种元素组成**：氢和氧。如果将两种气体混合在一起，再加上能量，就会得到水。

2 H subscript 2 open parentheses g close parentheses and O subscript 2 open parentheses g close parentheses equilibrium 2 H subscript 2 O open parentheses l close parentheses

圆柱体表面积的完整公式是  2 πr squared plus 2 πrh

此演示仅展示了一部分功能。访问 功能丰富的编辑器示例 以查看更多实际应用。

# 附加功能信息

MathType 基于 MathML 等标准进行内部表示，并使用 PNG 图像格式显示公式。它还可以处理其他格式，如 LaTeX、Flash、SVG 和 EPS。

此外，MathType 提供了一个专用的工具来帮助您处理化学符号。启用 ChemType 后，它会添加一个专门的工具栏，其中包含常用的化学符号，并更改符号，使其更直观地用于处理化学式。

# 用法

MathType 窗口分为两个主要区域：一个包含大量图标的 选项卡式工具栏，这些图标对创建数学方程式和化学式很有用；以及一个编辑区域，您可以看到当前公式、光标位置以及当前选定的文本（如果有）。

如果您想熟练使用此工具，以下资源将非常有用

  • 使用 MathType Web 涵盖了创建公式、使用键盘、在模板中移动光标、格式化内容或在移动设备上书写的基础知识。
  • 入门教程 用于帮助您开始使用 MathType。
  • ChemType 解释了专用化学工具栏的功能。
  • MathType 文档 是所有 MathType 功能和设置的完整参考。

# 编辑模式

MathType 允许您选择两种编辑模式

  • 经典输入模式 提供选项从 MathType 或 ChemType 工具栏中选择符号和模板，并将它们组合起来构建方程式。
  • 手写输入模式 允许您用自己的笔迹书写方程式。在检查方程式预览以确保其准确性后，您可以插入方程式或切换到经典输入以进行进一步编辑。 在此处阅读更多信息.

如果您使用移动设备访问使用 MathType 的页面，手写界面将默认显示。但是，如果您使用笔记本电脑或台式机访问同一页面，则会显示经典输入。用户始终可以自由地在两种界面之间切换。

# 安装

⚠️ 新的导入路径

从 42.0.0 版本 开始，我们更改了导入路径的格式。本指南使用新的、更短的格式。如果您使用的是旧版本的 CKEditor 5，请参考 旧版设置中的软件包 指南。

MathType 作为 CKEditor 5 插件提供，因此可以像其他功能一样组合到编辑器预设中。要将此功能添加到您的编辑器，请安装 @wiris/mathtype-ckeditor5 软件包

npm install --save @wiris/mathtype-ckeditor5

然后将其添加到您的插件列表和工具栏配置中。请注意，与本机 CKEditor 5 插件不同，此插件是从其自己的软件包中导入的。此外，此导入与标准 CKEditor 5 插件导入不同

import { ClassicEditor } from 'ckeditor5';
import MathType from '@wiris/mathtype-ckeditor5/dist/index.js';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ MathType, /* ... */ ],
        toolbar: [ 'MathType', 'ChemType', /* ... */ ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# 自定义 MathType 服务

可以使用不同的服务来支持 MathType。在 CKEditor 5 环境中部署 MathType 有多种方法。以下说明将允许您为 CKEditor 5 自定义 MathType Web 集成服务。

# Java

要安装 Java 服务，请按照以下步骤操作

  1. 下载 MathType Web 集成服务 - Java 软件包。

  2. 部署 pluginwiris_engine war 文件。

  3. 使用以下所示的配置将 mathTypeParameters 添加到 CKEditor 5

    ClassicEditor
    .create( document.querySelector( '#example' ), {
            plugins: [ MathType, /* ... */ ],
            toolbar: {
                items: [
                    'MathType',
                    'ChemType',
                    // More toolbar items.
                    // ...
                ]
            },
            language: 'en',
            // MathType parameters.
            mathTypeParameters : {
                serviceProviderProperties : {
                    URI : '/pluginwiris_engine/app/configurationjs',
                    server : 'java'
                }
            }
    })
    .then( /* ... */ )
    .catch( /* ... */ );

# PHP

要安装 PHP 服务，请按照以下步骤操作

  1. 下载 MathType Web 集成服务 - PHP 软件包。

  2. 将 generic_wiris/integration 文件夹复制到您的项目中。在此示例中，假设服务位于 DOCUMENT_ROOT/php-services/ 中。

  3. 使用以下配置将 mathTypeParameters 添加到 CKEditor 5

    ClassicEditor
    .create( document.querySelector( '#example' ), {
            plugins: [ MathType, /* ... */ ],
            toolbar: {
                items: [
                    'MathType',
                    'ChemType',
                    // More toolbar items.
                    // ...
                ]
            },
            language: 'en',
            // MathType parameters.
            mathTypeParameters : {
                serviceProviderProperties : {
                    URI : 'https://127.0.0.1/php-services/integration',
                    server : 'php'
                }
            }
    })
.then( /* ... */ )
.catch( /* ... */ );

# .NET

要安装 .NET 服务，请按照以下步骤操作

  1. 下载 MathType Web 集成服务 - Aspx 软件包。

  2. 将 generic_wiris/integration 文件夹复制到您的项目中。在此示例中，假设服务位于 DOCUMENT_ROOT/aspx-services/ 中。

  3. 使用以下配置将 mathTypeParameters 添加到 CKEditor 5

    ClassicEditor
    .create( document.querySelector( '#example' ), {
            plugins: [ MathType, /* ... */ ],
            toolbar: {
                items: [
                    'MathType',
                    'ChemType',
                    // More toolbar items.
                    // ...
                ]
            },
            language: 'en',
            // MathType parameters.
            mathTypeParameters : {
                serviceProviderProperties : {
                    URI : 'https://127.0.0.1/aspx-services/integration',
                    server : 'aspx'
                }
            }
    })
.then( /* ... */ )
.catch( /* ... */ );

# Ruby on Rails

要安装 Ruby on Rails 服务，请按照以下步骤操作

  1. 下载 MathType Web 集成服务 - Ruby on Rails 软件包。

  2. 安装 wirispluginengine.gem gem。

    gem install -l wirispluginengine.gem

  3. 使用以下配置将 mathTypeParameters 添加到 CKEditor 5

    ClassicEditor
    .create( document.querySelector( '#example' ), {
            plugins: [ MathType, /* ... */ ],
            toolbar: {
                items: [
                    'MathType',
                    'ChemType',
                    // More toolbar items.
                    // ...
                ]
            },
            language: 'en',
            // MathType parameters.
            mathTypeParameters : {
                serviceProviderProperties : {
                    URI : '/wirispluginengine/integrationn',
                    server : 'ruby'
                }
            }
    })
.then( /* ... */ )
.catch( /* ... */ );

# 在您的网站上显示方程式

默认情况下，MathType 返回 MathML 方程式，而 MathML 并非所有浏览器都支持。要显示页面上的方程式，您需要使用一个能够处理渲染过程的引擎。

幸运的是，MathType 引入了完整的 MathML 模式，该模式可以处理不支持的标记并将它们转换为浏览器可以正确识别的格式。您可以在 文档中 了解有关完整 MathML 模式的更多信息。