Drupal站点如何将自定义样式添加到 CKEditor 的样式下拉菜单

最近有关Magento的安装教程访问量上升，但是有小伙伴反馈里面的代码片段不是很清晰，不知道复制的代码结束在什么地方，默认CKeditor的已编排格式(<pre>)标签不够醒目，为了方便大家查看，所以为已编排格式(<pre>)代码片段给加上一定的背景颜色和样式。CKeditor的还有一个很棒的功能就是自定义的样式可以很方便的调用。下面我们就一起看看如何操作的吧。

为了避免修改的样式被覆盖，这里我们修改子主题的css样式即可。上篇分享了Drupal如何创建子主题，没有使用子主题的可以看看。

第一步：向样式表添加样式

打开style.css文件(路径: ./themes/mytheme/css/style.css)

.jh-code-scroll{
   width: 100%;
   height: auto;
   overflow-x:auto;
   overflow-y: hidden;
   text-align: center;
   width:100%; 
   background-color:#fffbbb;
        
}

保存关闭该文件，刷新缓存。

第二步：在Drupal中配置CKEditor

下一步要做的是配置CKEditor以识别这种样式。在 Drupal 8或Drupal 9 中，您可以在 Drupal 管理页面中执行此操作。

为此，请直接转到admin/config/content/formats URL，或按照以下步骤操作：