对于定制组件,可以定制显示在站点构建器工具栏中的现成工具栏组的副本。
您可以基于现成组件创建自己的版本,使其具有受限制的集合并在定制标记上可用。任何定制都不影响现成组件。
您可以基于现成组件创建自己的版本,使其具有受限制的集合并在定制标记上可用,但它不会影响任何现成组件。
工具栏组定义单击标题或段落组件以对其进行编辑时在工具栏上看到的内容。您可以删除和重新排序标题或段落组件支持的内容,但不允许使用其他插件。
要在站点构建器中定制工具栏组,使用的语法需要与 CKEditor 用于其 toolbarGroups 配置的语法相同。请参见 https://ckeditor.com/latest/samples/toolbarconfigurator/index.html#basic。
"basicstyles" — 限定为粗体/斜体/下划线 https://ckeditor.com/cke4/addon/basicstyles
"styles" — 字体样式 https://docs.ckeditor.com/ckeditor4/latest/guide/dev_styles.html
"colors" — 文本和背景颜色 https://docs.ckeditor.com/ckeditor4/latest/guide/dev_colorbutton.html
"undo" — 对 CKEditor 中的当前实例执行撤消/重做
"links" - 用于链接对话框的定制插件
"paragraph" — 带项目符号/编号的列表和缩进支持
"list"
"indent"
"align" — 左对齐/右对齐/居中对齐
"cleanup" — 删除选定文本的样式
段落组件还支持图像和表插入插件:
"insert"
"image"
"table"
此外,还可以使用行分隔符条目:
"/"
注:
如果您在工具栏组配置中设置了任何其他值,在创建站点构建器工具栏之前将删除该值。您无法提供 "extraPlugins"。只支持 "name"/"groups" 配置。将忽略所有 "items" 条目。例如,如果您要阻止用户定义字体、颜色、样式或大小,则可以按如下所示更新工具栏配置。对于 "id" 值,您需要指定不同于现成值的定制值。
[{
"name": "<category name>",
"list": [{
"type": "scs-title",
"id": "<custom-value>",
"config": {
"toolbarGroups": [{
"name": "basicstyles",
"groups": ["basicstyles"]
}, {
"name": "undo",
"groups": ["undo"]
},
"/", {
"name": "links",
"groups": ["links"]
}, {
"name": "paragraph",
"groups": ["list", "indent"]
},
"/", {
"name": "align",
"groups": ["align"]
},
{
"name": "insert",
"groups": ["image", "table"]
}, {
"name": "cleanup",
"groups": ["cleanup"]
}
]
}
}, {
"type": "scs-paragraph",
"id": "<custom-value>",
"config": {
"fontSize_sizes": "16/16px;24/24px;48/48px;"
}
}]
}]
验证
使用上述代码替换 components.json 文件,然后编辑站点(如果已在编辑,则刷新浏览器)。此时,在编辑标题组件时,它不再显示所选内容的字体样式或颜色。段落组件将继续显示这些内容,而可用字号列表限于 16、24 和 48。
默认工具栏组
标题和段落的默认工具栏组如下:
标题
[{
"name": "basicstyles",
"groups": ["basicstyles"]
}, {
"name": "styles",
"groups": ["styles"]
}, {
"name": "colors",
"groups": ["colors"]
}, {
"name": "undo",
"groups": ["undo"]
},
"/", {
"name": "links",
"groups": ["links"]
}, {
"name": "paragraph",
"groups": ["list", "indent"]
}, {
"name": "align",
"groups": ["align"]
}, {
"name": "cleanup",
"groups": ["cleanup"]
}
]段落
[{
"name": "basicstyles",
"groups": ["basicstyles"]
}, {
"name": "styles",
"groups": ["styles"]
}, {
"name": "colors",
"groups": ["colors"]
}, {
"name": "undo",
"groups": ["undo"]
},
"/", {
"name": "links",
"groups": ["links"]
}, {
"name": "paragraph",
"groups": ["list", "indent"]
}, {
"name": "align",
"groups": ["align"]
}, {
"name": "insert",
"groups": ["image", "table"]
}, {
"name": "cleanup",
"groups": ["cleanup"]
}
]