Apostrophe CMS富文本全局工具栏：能否设置全局默认工具栏与样式？

当然可行！Apostrophe CMS 完全支持定义全局默认的富文本工具栏和样式，同时允许你针对单个 rich-text-widget 进行个性化覆盖——刚好匹配你提到的需求，包括默认显示带预定义样式的下拉框。

一、设置全局默认配置 #

要给所有富文本小部件统一配置工具栏和样式，你需要修改 modules/apostrophe-rich-text-widgets/index.js 文件，在其中定义全局默认值：

module.exports = {
  defaults: {
    // 全局默认工具栏，包含样式下拉框（Styles）
    toolbar: [ 'Styles', 'Bold', 'Italic', 'Link', 'Unlink', 'BulletedList', 'NumberedList' ],
    // 预定义的样式选项，会显示在样式下拉框中
    styles: [
      { name: '普通正文', element: 'p' },
      { name: '一级标题', element: 'h1' },
      { name: '二级标题', element: 'h2' },
      { name: '高亮文本', element: 'span', attributes: { class: 'highlight-text' } },
      { name: '引用块', element: 'blockquote' }
    ]
  }
};

这里的关键是把 Styles 加入 toolbar 数组，这样样式下拉框就会默认出现在所有富文本小部件的工具栏里。styles 数组里的每个对象可以自定义样式名称、对应的HTML元素，甚至添加类名、属性等。

二、针对单个小部件覆盖配置 #

如果某个特定的富文本小部件需要不同的工具栏或样式，直接在调用小部件时单独指定配置即可，全局配置会被自动覆盖：

比如在页面模板（如 views/pages/home.html）中使用单例小部件时：

{{ apos.singleton(data.page, 'featuredContent', 'apostrophe-rich-text', {
  // 自定义工具栏，比全局多了图片上传按钮
  toolbar: [ 'Styles', 'Bold', 'Italic', 'Image', 'Link', 'Unlink' ],
  // 自定义样式选项，只保留需要的几个
  styles: [
    { name: '普通正文', element: 'p' },
    { name: '特色标题', element: 'h2', attributes: { class: 'featured-title' } },
    { name: '提示框', element: 'div', attributes: { class: 'tip-box' } }
  ]
}) }}

如果是自定义的富文本小部件（继承自 apostrophe-rich-text-widgets），也可以在自己模块的 index.js 里重新定义 defaults 来覆盖全局配置。

三、额外注意点 #

• 自定义样式对应的CSS类需要你在项目的样式文件（如 public/css/site.css）中手动实现，比如：

.highlight-text {
  background-color: #fff3cd;
  padding: 2px 4px;
  border-radius: 3px;
}
.featured-title {
  color: #2c3e50;
  font-size: 2rem;
  margin-bottom: 1rem;
}

• 如果只想修改部分配置（比如保留全局工具栏，只替换样式），只需要指定你要修改的属性即可，未指定的会自动继承全局默认值。

这样设置后，所有默认的 rich-text-widget 都会使用你定义的全局工具栏和样式，同时你可以根据需求随时单独调整某个小部件的配置，完全满足你的场景需求。

内容的提问来源于stack exchange，提问作者Gareth Cooper