如何在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 的语义化规范，又能精确实现“用户首次输入即呈现加粗且居中”的效果。按部就班来，基本不会出岔子。