CKEditor 5 基础文本样式（Basic Styles）功能全解析：Bold、Italic、Code、Strikethrough、上下标等内联格式的安装、配置与源码实现-平芜编程栈

CKEditor 5 基础文本样式（Basic Styles）功能全解析：Bold、Italic、Code、Strikethrough、上下标等内联格式的安装、配置与源码实现

【免费下载链接】ckeditor5Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.项目地址: https://gitcode.com/GitHub_Trending/ck/ckeditor5

本文围绕 CKEditor 5 官方开源仓库中的ckeditor5-basic-styles功能包展开，系统讲解粗体、斜体、下划线、删除线、行内代码、下标与上标这七种最核心的内联文本样式：包括每种样式的命令名、工具栏组件名、输出元素、可支持的输入元素、安装配置方式，以及基于本仓库源码的底层实现原理（属性命令、Schema、模型↔视图转换器与快捷键）。读完本文，你将掌握在 CKEditor 5 中快速集成全套基础文本样式、用数据 API 导入/导出 HTML、并理解内联代码光标进退（two-step caret movement）机制的完整实战方案。

功能概览与 Demo

基础文本样式（Basic Styles）是任何 WYSIWYG 编辑器工具栏的基石，它覆盖了日常排版中最常用的格式化能力：加粗（Bold）、斜体（Italic）、下划线（Underline）、删除线（Strikethrough）、行内代码（Code）、下标（Subscript）、上标（Superscript）。

你可以通过工具栏按钮应用这些格式，也可以配合自动格式化（Autoformat）功能，在输入时直接用 Markdown 语法触发格式转换：

加粗：点击加粗工具栏按钮，或输入**text**/__text__；
斜体：点击斜体工具栏按钮，或输入*text*/_text_；
行内代码：点击代码工具栏按钮，或输入`text`；
删除线：点击删除线工具栏按钮，或输入~~text~~。

本仓库中对应的交互演示片段位于 packages/ckeditor5-basic-styles/docs/_snippets/features/basic-styles.js 与 packages/ckeditor5-basic-styles/docs/_snippets/features/basic-styles.html，该演示展示了基础样式功能的组合使用；若需要体验更完整的特性组合，可参考 docs/examples/builds 中的功能丰富编辑器示例。

七种可用文本样式一览

下表完整列出ckeditor5-basic-styles提供的每一种样式功能及其对应的命令名、工具栏组件名与最终输出的 HTML 元素：

样式功能	命令名（Command）	工具栏组件名	输出元素
Bold	`'bold'`	`'bold'`	`<strong>bold</strong>`
Italic	`'italic'`	`'italic'`	`<i>italic</i>`
Underline	`'underline'`	`'underline'`	`<u>underline</u>`
Strikethrough	`'strikethrough'`	`'strikethrough'`	`<s>strikethrough</s>`
Code	`'code'`	`'code'`	`<code>code</code>`
Subscript	`'subscript'`	`'subscript'`	`<sub>subscript</sub>`
Superscript	`'superscript'`	`'superscript'`	`<sup>superscript</sup>`

注意：Code 功能仅提供行内代码格式化。若需要插入带编程语言标识的多行代码块，请使用代码块功能。

支持的输入元素（Upcast）

默认情况下，每个样式功能可以"向上转换"（upcast）多种类型的内容——无论内容来自剪贴板粘贴、编辑器启动时的数据加载，还是通过数据 APIeditor.setData()注入。下表是各功能完整支持的元素清单：

样式功能	支持的输入元素
Bold	`<strong>`、`<b>`、任意元素`style="font-weight: bold"`（或数值 ≥ 600 的`font-weight`）
Italic	`<i>`、`<em>`、任意元素`style="font-style: italic"`
Underline	`<u>`、任意元素`style="text-decoration: underline"`
Strikethrough	`<s>`、`<del>`、`<strike>`、任意元素`style="text-decoration: line-through"`
Code	`<code>`、任意元素`style="word-wrap: break-word"`
Subscript	`<sub>`、任意元素`style="vertical-align: sub"`
Superscript	`<sup>`、任意元素`style="vertical-align: super"`

这一"宽进严出"的设计非常实用：从 Word、网页或其他富文本源粘贴内容时，编辑器能够自动识别等价的语义标记并归一到标准元素，例如把、font-weight: bold都统一转换为模型中的bold属性并在输出时呈现为。

源码视角：基础样式功能的实现原理

本仓库的ckeditor5-basic-styles包采用高度统一的"编辑（Editing）+ UI（UI）+ 属性命令（AttributeCommand）"三件套架构，每个样式功能都遵循同样的实现模式。理解这一模式，就等于理解了全部七个功能。

统一基类：AttributeCommand

所有基础样式命令都继承自 attributecommand.ts 中的AttributeCommand类，其核心职责是"在文本或元素上切换（toggle）单个属性"：

refresh()：根据当前文档选区状态更新命令的value（是否已激活）与isEnabled（是否可用）。其中isEnabled通过model.schema.checkAttributeInSelection( doc.selection, this.attributeKey )判断当前选区是否允许应用该属性；
execute( options )：执行命令。若options.forceValue未提供，则根据当前value自动取反（激活 ↔ 取消）。执行逻辑区分三种情况：
- 选区非空：通过schema.getValidRanges()获取所有合法范围，对范围内每个允许该属性的节点设置/移除属性；
- 选区折叠在非空节点内：把属性设置到选区本身（此后键入的字符会自动继承该属性）；
- 选区折叠在空节点内：把属性设置到选区的父节点（空节点中的选区会继承父节点的属性）。

正是这种设计，保证了"在选区内应用格式""在光标处开启格式后继续输入""在空段落内切换格式"等场景都行为正确。

标准模板：以 Bold 为例

以 bold/boldediting.ts 为例，每个样式功能的编辑插件在init()中完成四件事：

// 1. 在模型 Schema 中允许文本节点携带 bold 属性，并声明其行为特征 editor.model.schema.extend( '$text', { allowAttributes: BOLD } ); editor.model.schema.setAttributeProperties( BOLD, { isFormatting: true, // 属于格式类属性 copyOnEnter: true // 回车后新段落继承该格式 } ); // 2. 注册模型属性 → 视图元素的转换器（含 upcastAlso 反向转换规则） editor.conversion.attributeToElement( { model: BOLD, view: 'strong', upcastAlso: [ 'b', viewElement => { const fontWeight = viewElement.getStyle( 'font-weight' ); if ( !fontWeight ) return null; // font-weight 可能是字符串或数值，大于等于 600 视为加粗 if ( fontWeight == 'bold' || Number( fontWeight ) >= 600 ) { return { name: true, styles: [ 'font-weight' ] }; } return null; } ] } ); // 3. 注册命令 editor.commands.add( BOLD, new AttributeCommand( editor, BOLD ) ); // 4. 绑定快捷键并写入无障碍信息库 editor.keystrokes.set( 'CTRL+B', BOLD ); editor.accessibility.addKeystrokeInfos( { keystrokes: [ { label: t( 'Bold text' ), keystroke: 'CTRL+B' } ] } );

UI 侧则由 bold/boldui.ts 负责：通过工具函数 utils.ts 中的getButtonCreator创建可切换（toggle）按钮，将按钮的isEnabled绑定到命令的isEnabled、isOn绑定到命令的value，点击时执行editor.execute( commandName )并重新聚焦编辑视图；同时还会注册菜单栏组件menuBar:bold，使其在菜单栏（MenuBar）中同样可用。

各功能的快捷键与转换差异

从源码可以逐一确认各功能的注册细节（均位于 src 目录）：

功能	输出元素	主要 upcast 规则	快捷键
Bold	`strong`	`b`、`font-weight: bold`或 ≥ 600	`Ctrl+B`
Italic	`i`	`em`、`font-style: italic`	`Ctrl+I`
Underline	`u`	`text-decoration: underline`	`Ctrl+U`
Strikethrough	`s`	`del`、`strike`、`text-decoration: line-through`	`Ctrl+Shift+X`
Code	`code`	见下文特殊处理	双向箭头（two-step）
Subscript	`sub`	`vertical-align: sub`	无
Superscript	`sup`	`vertical-align: super`	无

值得注意的差异点：

Code 功能的特殊性：code/codeediting.ts 声明了依赖TwoStepCaretMovement插件，并执行registerAttribute( CODE )注册"两步光标移动"，同时用inlineHighlight( editor, CODE, 'code', 'ck-code_selected' )为选中的行内代码添加高亮类名——这正是下文"在行内代码两侧输入"体验的实现基础；
下划线/删除线/上下标：均通过 CSS 样式反向转换（text-decoration、vertical-align），因此在粘贴带内联样式的 HTML 时同样能正确识别。

在行内代码周围输入：两步光标移动

CKEditor 5 允许用户在行内代码元素的内部边界和外部边界分别输入，从而大幅提升代码编辑的便捷性。

在代码元素内部输入：将光标移动到代码元素的（起始或结束）边界，只要代码仍处于高亮状态（默认显示为半透明灰色背景），此时输入的文本与应用的新格式都会被包含在代码元素之内：

在代码元素前后输入：将光标移动到边界后，再按一次方向键（→或←），代码元素不再高亮，此后输入的文本或应用的格式将不会被代码元素包裹：

这正是 code/codeediting.ts 中注册的无障碍快捷键所描述的行为——按两下方向键即可"移出行内代码样式"。

安装与配置

在完成编辑器安装之后，将需要的插件加入插件列表，然后在工具栏配置中声明对应组件即可。下面是一个同时启用全部七种基础样式并全部展示在工具栏上的完整示例：

import { ClassicEditor, Bold, Code, Italic, Strikethrough, Subscript, Superscript, Underline } from 'ckeditor5'; ClassicEditor .create( { licenseKey: '<YOUR_LICENSE_KEY>', // 或者使用 'GPL'。 plugins: [ Bold, Code, Italic, Strikethrough, Subscript, Superscript, Underline ], toolbar: { items: [ 'bold', 'italic', 'underline', 'strikethrough', 'code', 'subscript', 'superscript' ] } } ) .then( /* ... */ ) .catch( /* ... */ );

配置要点说明：

plugins与toolbar.items需成对出现：插件负责注册命令与转换器（编辑器功能），工具栏组件名负责在界面中渲染按钮，二者缺一不可；若只想启用能力而不展示按钮，可以只加插件、不加工具栏项；
licenseKey：'GPL'适用于遵循 GPL 许可的场景，商业使用需替换为你的许可证密钥；
按需裁剪：'bold'、'italic'等组件名可与工具栏配置文档中的分组、分隔符等选项自由组合。

常用 API：以编程方式应用样式

每个样式功能都会注册一个对应的命令，你可以在代码中直接执行命令来操作当前选区。例如下面的代码会把当前选区中的文本应用为加粗：

editor.execute( 'bold' );

其他样式同理：editor.execute( 'italic' )、editor.execute( 'code' )、editor.execute( 'strikethrough' )、editor.execute( 'underline' )、editor.execute( 'subscript' )、editor.execute( 'superscript' )。

AttributeCommand还支持forceValue选项以强制指定结果，例如editor.execute( 'bold', { forceValue: true } )无论如何都会应用加粗（详见 attributecommand.ts）。此外，由于各功能都声明了格式属性（isFormatting: true），它们也可以配合移除格式功能一键清除全部基础文本样式。

小结

基础文本样式功能包是 CKEditor 5 中最常用、也最能体现其"模型-视图分离 + 属性命令"架构魅力的模块：七个功能共享同一套AttributeCommand与"Editing + UI"插件模板，通过 Schema 声明、属性→元素转换器与upcastAlso反向规则，实现了标准的///<s>/<code>//输出与对旧式标记（、、<del>、<strike>及内联 CSS）的宽容导入。无论是基础工具栏搭建、粘贴兼容性处理，还是通过命令 API 做程序化排版，掌握本文内容即可覆盖绝大部分实际场景。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考