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

指南自动格式化

自动格式化功能允许您使用类似 Markdown 的简码快速格式化内容。这样您无需使用工具栏按钮或下拉菜单来完成最常见的格式化功能。

# 演示

在下面的编辑器中测试自动格式化功能。尝试在键入时使用 Markdown 简码。例如

  1. 开始新的一行。
  2. 按 # 然后按 空格。

该行将自动转换为标题。

如果需要，您可以通过按 退格键 撤消自动更改。

这是 CKEditor 5 的自动格式化功能。

使用 Markdown 语法简码来即时格式化内容。例如

  • 在一些文本周围键入 _ 或 * 以使其成为 斜体。
  • 在一些文本周围键入 __ 或 ** 以使其成为 粗体。
  • 以 1. 后面跟着空格开始一行以创建有序列表。
  • 以 - 后面跟着空格开始一行以创建无序列表。
  • 以 ˋˋˋ 开始一行以创建代码块。

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

# 块格式化

以下块格式化选项可用

  • 无序列表 – 以 * 或 - 后面跟着空格开始一行。
  • 编号列表 – 以 1. 或 1) 后面跟着空格开始一行。
  • 待办事项列表 – 以 [ ] 或 [x] 后面跟着空格开始一行以分别插入未选中或已选中的列表项。
  • 标题 – 以 # 或 ## 或 ### 后面跟着空格开始一行以创建标题 1、标题 2 或标题 3（如果 options 定义了更多标题，则最多可创建标题 6）。
  • 块引用 – 以 > 后面跟着空格开始一行。
  • 代码块 – 以 ``` 开始一行。
  • 水平线 – 以 --- 开始一行。

# 内联格式化

以下 基本样式 内联格式化选项可用

  • 粗体 – 键入 **text** 或 __text__,
  • 斜体 – 键入 *text* 或 _text_,
  • 代码 – 键入 `text`,
  • 删除线 – 键入 ~~text~~。

# 安装

⚠️ 新的导入路径

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

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

import { ClassicEditor, Autoformat } from 'ckeditor5';

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

请记住将适当的功能添加到编辑器配置中。只有实际配置中包含的命令才会启用自动格式化。例如，如果编辑器中未注册 bold 命令，则 bold 自动格式化将不起作用。

# 创建自定义自动格式化程序

Autoformat 功能基于 blockAutoformatEditing 和 inlineAutoformatEditing 工具来创建上面提到的自动格式化程序。

您可以使用这些工具创建自己的自动格式化程序。查看 Autoformat 功能的代码 作为示例。

# 已知问题

虽然自动格式化功能稳定且可供使用，但已报告了一些问题。如果您觉得它们很重要，请在 GitHub 上为它们点赞 👍。

  • 粘贴 Markdown 格式的内容不会自动将粘贴的语法标记转换为格式正确的內容。GitHub 问题：#2321，#2322。
  • 目前尚不支持设置特定的代码块语言（插入时默认为纯文本）。GitHub 问题：#8598。

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

与 Markdown 输出 功能结合，自动格式化功能提供了全面的 Markdown WYSIWYG 编辑体验，如 “CKEditor 5：最佳开源 Markdown 编辑器” 博客文章中所述。访问 免费在线 Markdown 编辑器 以查看此解决方案的实现。

# 贡献

该功能的源代码可在 GitHub 上获取，地址为 https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-autoformat。