如何在 CKEditor 5 中默认启用加粗和居中对齐样式

本文详解如何通过 CKEditor 5 的 execute() 方法，在编辑器初始化后立即应用加粗（bold）和居中对齐（alignment:center）样式，使用户输入的首段文字自动具备这两种格式。需注意：居中对齐需额外引入 Alignment 插件。

本文详解如何通过 ckeditor 5 的 `execute()` 方法，在编辑器初始化后立即应用加粗（bold）和居中对齐（alignment:center）样式，使用户输入的首段文字自动具备这两种格式。需注意：居中对齐需额外引入 alignment 插件。

CKEditor 5 默认不提供“全局默认样式”的配置项（如 CSS 强制影响内容），因为其内容采用语义化模型（Model → View），样式必须通过命令（Command）或数据层操作生效。直接对 <textarea> 或容器元素设置 text-align: center 或 font-weight: bold 仅作用于容器本身，不影响编辑器生成的内容 DOM，因此无效。

✅ 正确做法是在编辑器实例创建成功后（即 .then(editor => {...}) 回调中），调用 editor.execute() 主动触发内置命令：

• editor.execute('bold')：启用加粗格式（作用于当前选区或插入点）；
• editor.execute('alignment', { value: 'center' })：设置文本居中对齐。

⚠️ 重要前提：alignment 命令不属于 Classic Editor 默认包。若未显式启用 Alignment 插件，调用将报错 Unknown command: alignment。因此必须：

1. 使用支持 Alignment 的构建版本（如 @ckeditor/ckeditor5-build-classic + 手动添加插件），或
2. 通过 CDN 引入完整版（推荐使用 CDN 构建链接 —— 注意：该链接对应 Classic Build，不含 Alignment；需改用 CKEditor 5 Online Builder 定制构建，或切换为 @ckeditor/ckeditor5-build-decoupled-document 并手动集成）。

? 推荐实践（兼容性与可维护性兼顾）：

<script src="https://www.php.cn/link/ca7d733a83dc1d8278998a10b6a52883"></script><textarea id="editor"></textarea><script>ClassicEditor  .create(document.querySelector('#editor'), {    // 启用 Alignment 插件（需确保构建版本已包含）    plugins: [      'Essentials', 'Bold', 'Italic', 'Alignment', // 显式声明关键插件      // ...其他所需插件    ],    toolbar: ['bold', 'italic', 'alignment'] // 将对齐按钮加入工具栏（可选但推荐）  })  .then(editor => {    // 初始化后立即应用格式（仅影响光标所在段落）    editor.execute('bold');    editor.execute('alignment', { value: 'center' });    // ✅ 进阶：确保新段落也继承居中+加粗（监听 enter 键或 model change）    editor.model.document.on('change:data', () => {      const root = editor.model.document.getRoot();      const paragraph = root.getChild(0);      if (paragraph && paragraph.name === 'paragraph') {        editor.model.change(writer => {          writer.setAttribute('textAligment', 'center', paragraph);          writer.setAttribute('bold', true, paragraph);        });      }    });  })  .catch(error => {    console.error('CKEditor initialization failed:', error);  });</script>

? 注意事项：

• execute() 仅作用于当前选区或插入点所在的块级元素（如段落），无法“全局默认”所有未来输入——这是 CKEditor 5 的设计哲学（样式基于内容模型，非 CSS 覆盖）；
• 若需更严格的默认行为（如所有新段落自动居中加粗），建议结合 model.change() 在数据层动态设置属性；
• 使用自定义构建时，请务必在 CKEditor 5 Online Builder 中勾选 Text Alignment 功能，并下载对应 JS 文件替换 CDN 链接。

通过上述方式，即可可靠实现用户首次输入即呈现加粗且居中效果，兼顾规范性与可扩展性。