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

指南自动文本转换 (自动更正)

文本转换功能支持自动更正。它会自动将预定义的文本片段更改为其改进后的形式。

# 演示

在下面的编辑器中键入诸如 (c)、3/4、!=、---、"foo" 之类的代码段，看看它们是如何转换为印刷效果更好的形式的。您可以在 TextTransformationConfig 文档中查看预定义转换的完整列表。

此演示展示了有限的功能集。访问 功能丰富的编辑器示例 以查看更多实际操作。

# 其他功能信息

以下是一些由文本转换功能更改的代码段示例

从 到
(tm) ™
1/2 ½
-> →
-- –
"foo" “foo”

此功能预先配置了一组最常用的转换。但是，您可以删除现有的转换或添加自己的自动更正条目。

虽然此功能最常用于插入键盘上没有的特殊字符，但您也可以使用它来实现其他目标。例如，您可以通过将其配置为将某些缩写（例如团队或公司名称）扩展为完整形式来提高用户的生产力。

在阅读本指南后，您可以在 CKEditor 5 中的自动文本转换 博客文章中找到有趣的细节和使用示例。

# 安装

⚠️ 新的导入路径

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

在 安装编辑器 后，将功能添加到您的插件列表和工具栏配置中

import { ClassicEditor, TextTransformation } from 'ckeditor5';

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

# 配置转换

此功能预先配置了一组转换。您可以在 TextTransformationConfig 文档中找到它们的列表。

通过使用下面定义的选项，您可以扩展、限制或覆盖此列表

# 示例：使用 transformations.include

例如，要使用“引用”和“排版”组中的转换并将 CKE 转换为 CKEditor，您可以像这样使用 transformations.include 属性

ClassicEditor
    .create( editorElement, {
        typing: {
            transformations: {
                include: [
                    // Use only the 'quotes' and 'typography' groups.
                    'quotes',
                    'typography',

                    // Plus some custom transformation.
                    { from: 'CKE', to: 'CKEditor' }
                ],
            }
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# 示例：使用 transformations.remove 和 extra

另一个示例，删除一些转换并添加一些额外的转换

ClassicEditor
    .create( editorElement, {
        typing: {
            transformations: {
                remove: [
                    // Do not use the transformations from the
                    // 'symbols' and 'quotes' groups.
                    'symbols',
                    'quotes',

                    // As well as the following transformations.
                    'arrowLeft',
                    'arrowRight'
                ],

                extra: [
                    // Add some custom transformations, for example, for emojis.
                    { from: ':)', to: '🙂' },
                    { from: ':+1:', to: '👍' },
                    { from: ':tada:', to: '🎉' },

                    // You can also define patterns using regular expressions.
                    // Note: The pattern must end with `$` and all its fragments must be wrapped
                    // with capturing groups.
                    // The following rule replaces ` "foo"` with ` «foo»`.
                    {
                        from: /(^|\s)(")([^"]*)(")$/,
                        to: [ null, '«', null, '»' ]
                    },

                    // Finally, you can define `to` as a callback.
                    // This (naive) rule will auto-capitalize the first word after a period, question mark, or an exclamation mark.
                    {
                        from: /([.?!] )([a-z])$/,
                        to: matches => [ null, matches[ 1 ].toUpperCase() ]
                    }
                ],
            }
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

您可以在 TextTransformationDescription 中详细了解转换规则的格式。

您可以在演示中测试这些自定义规则。尝试键入 :) 或 :+1:，看看文本是如何转换为表情符号的。您还可以写一些句子来测试编辑器如何在句点、引号或感叹号之后将单词首字母大写。

除了启用自动文本转换之外，您可能还想查看以下生产力功能

  • 自动格式化 – 快速将格式应用于您正在编写的內容。
  • 自动链接 – 将键入或粘贴到编辑器中的链接和电子邮件地址转换为活动 URL。
  • 斜杠命令 – 通过在编辑器中直接键入其名称或别名来执行预定义的命令。
  • 提及 – 支持智能自动补全。

# 贡献

该功能的源代码可在 GitHub 上获得：https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-typing。