CKEditor 5 默认启用加粗与居中对齐样式

本文详细解读如何借助 CKEditor 5 的 execute() 方法，在编辑器初始化完成后立即应用加粗（bold）与居中对齐（alignment:center）样式，使用户输入的首段文字自动具备这两种格式。提醒一点：使用居中对齐前，需额外引入 Alignment 插件。

简明结论：若想在 CKEditor 5 中实现“用户打开编辑器时，首段文字自动带有加粗和居中效果”，关键在于编辑器初始化成功后调用 execute() 命令。不过操作过程中有几个常见陷阱，提前了解能节省不少调试时间。

不少开发者最初尝试在 或容器元素上直接通过 CSS 强制加粗与居中，例如使用 <code>text-align: center; font-weight: bold;</code>。但这里必须提醒：<strong>这种写法仅对容器本身生效，编辑器内部生成的 DOM 内容并不受其影响</strong>。CKEditor 5 的内容模型（Model → View）采用语义化驱动，样式必须通过命令或数据层操作才能有效控制。</p><p>那么正确做法是怎样的？标准路径如下：</p><ul><li><code>editor.execute('bold')</code>：对当前光标所在段落启用加粗；</li><li><code>editor.execute('alignment', { value: 'center' })</code>：将文本设为居中对齐。</li></ul><p>这两个命令需要在 <code>.then(editor => {...})</code> 的回调中执行，确保编辑器实例已完全就绪。</p><p>? <strong>硬性前提：必须先安装 Alignment 插件</strong></p><p>这是最容易出错的地方。Alignment 命令<strong>并不属于 Classic Editor 的默认插件包</strong>。如果使用默认构建版本，直接调用 <code>editor.execute('alignment')</code> 会抛出 <code>Unknown command: alignment</code> 错误。因此，必须确保以下两点：</p><ol><li>构建版本已包含 Alignment 插件（例如手动添加 <code>@ckeditor/ckeditor5-alignment</code>）；</li><li>或在 CKEditor 5 Online Builder 中勾选 Text Alignment 功能，重新生成定制构建。</li></ol><p>顺便提一句，通过 CDN 加载的经典构建通常不带 Alignment，切勿直接添加代码。若想使用 CDN 方式，要么通过 Online Builder 定制，要么换成 <code>@ckeditor/ckeditor5-build-decoupled-document</code> 并手动集成。</p><p>? <strong>推荐实践：兼顾兼容性与可维护性</strong></p><pre class="brush:php;toolbar:false;"><script src="https://www.php.cn/link/ca7d733a83dc1d8278998a10b6a52883"></script> <textarea id="editor">

? 注意事项

• execute() 命令仅作用于当前选区所在的块级元素（如段落），无法实现全篇全局默认——这是 CKEditor 5 的设计理念：样式绑定内容模型，而非依赖 CSS 覆盖；
• 若希望所有新段落自动居中加粗，上述 change:data 监听方案极为实用，它直接在数据层操作属性；
• 使用 Online Builder 定制时，务必勾选 Text Alignment，否则下载的 JS 文件将无法提供该功能。

总体而言，这套方案既符合 CKEditor 5 的语义化规范，又能精准实现“用户首次输入即呈现加粗且居中”的效果。按步骤操作，基本不会出错。