如何设置CKEditor5默认输入文本为加粗且居中对齐

直接给编辑器元素或父元素加CSS无法生效，因为CKEditor5的编辑内容区域样式由自身引擎控制，外部样式无法穿透覆盖核心编辑区域的默认格式。可以通过以下两种方式实现需求：

方法一：设置选区默认样式（用户可手动修改） #

编辑器初始化完成后，通过API给当前选区应用加粗和居中属性，确保开始输入时自动继承该样式：

ClassicEditor
.create(document.querySelector('#editor'))
.then(editor => {
  // 初始化时给选区和当前块应用样式
  editor.model.change(writer => {
    const selection = editor.model.document.selection;
    // 给选区设置加粗属性
    writer.setSelectionAttribute('bold', true);
    // 给当前块（如<p>）设置居中对齐
    const block = selection.getFirstPosition().parent;
    writer.setAttribute('alignment', 'center', block);
  });

  // 监听内容变化，确保选区始终保持加粗样式（可选）
  editor.model.document.on('change:data', () => {
    const selection = editor.model.document.selection;
    if (!selection.hasAttribute('bold')) {
      editor.model.change(writer => {
        writer.setSelectionAttribute('bold', true);
      });
    }
    // 确保块元素始终居中（可选）
    const block = selection.getFirstPosition().parent;
    if (block.getAttribute('alignment') !== 'center') {
      editor.model.change(writer => {
        writer.setAttribute('alignment', 'center', block);
      });
    }
  });
})
.catch(error => {
  console.error(error);
});

方法二：全局内容样式配置（强制所有段落默认样式） #

通过contentStyles配置项，给编辑器内所有段落设置默认加粗和居中，这种方式下所有新创建的段落都会自动应用该样式：

ClassicEditor
.create(document.querySelector('#editor'), {
  contentStyles: [
    'p { text-align: center; font-weight: bold; }'
  ]
})
.catch(error => {
  console.error(error);
});

注意事项 #

• 确保你使用的CKEditor5版本包含Bold和Alignment插件（ClassicEditor默认已包含这两个插件）。
• 方法一的样式用户可以通过工具栏按钮手动取消，方法二的样式是全局默认，需要用户手动修改格式才能改变。

内容的提问来源于stack exchange，提问作者Nissim Elbaz