Drupal 10文本编辑器styles dropdown添加自定义样式

使用drupal开发的网站,在上传内容时,你会发现,系统自带的文本编辑器Text formats and editors中无法设置内容的颜色。但是,它有一个styles空下拉样式菜单。意味着,我们可以配置这个自定义样式,来增加需要的样式。
一、定义CSS类
在网站的主题中,新建/htdocs/themes/bailong/css/bailong.css文件,在样式文件bailong.css中添加两个样式:
.myred {color:red;}
.myblue {color:blue}
drupal 10
1、新建样式文件,并添加CSS类后,上传CSS文件后,要清理缓存;
二、调用CSS类
在“Administration -> Configuration -> Content authoring  Text formats and editors”下,点击“styles dropdown”,输入p.myred | 红色,p.myblue | 蓝色。
1、“p.myred | 红色”与“p.myblue | 蓝色”各占一行;
2、由于文章内容是用P分段的,所以这里使用p标签;
drupal CSS
三、应用CSS类
在content中打开文本编辑器,点击styles,你会发现下拉菜单中多了“红色、蓝色”两个按钮。
选择要添加颜色的文字,然后从styles中选择一个颜色,保存。打开网页后,设置的颜色变了。说明配置成功。
drupal 10
通过上述方法,我们可以为drupal的文本编辑器添加任意CSS样式,然后使用styles下拉菜单把他们展现出来。