编辑器控件
编辑器控件是指在主题内通过 schema tag 定义的 settings 属性,这些属性定义的控件类型会展示在主题编辑器中。
基础控件类型
标准属性
以下是每个编辑器控件的标准属性。根据控件类型的不同,会有额外的专有属性。
| 属性 | 描述 | 是否必填 |
|---|---|---|
| type | 控件类型 | 是 |
| id | 配置 id,用于访问配置值 | 是 |
| label | 配置标签,将呈现在主题编辑器中 | 是 |
| default | 配置的默认值 | 否 |
| info | 配置的提示信息 | 否 |
text
此类型的控件会输出一个单行文本输入框。
额外属性:
| 属性 | 描述 | 是否必填 |
|---|---|---|
| placeholder | 输入框的占位文本 | 否 |
此控件可用于单行文本的输入,例如组件的标题。
示例代码:
{
"name": "My Section",
"settings": [
{
"type": "text",
"id": "title",
"label": "Title",
"default": "my section title",
"placeholder": "please enter title"
}
],
"presets": [
{
"name": "My Section"
}
]
}
输出:

当访问此控件的配置值时,数据以 string 类型的形式返回。
textarea
此类型的控件会输出一个多行文本输入框。
额外属性:
| 属性 | 描述 | 是否必填 |
|---|---|---|
| placeholder | 输入框占位文本 | 否 |
| limit | 文本输入最大长度 | 否 |
此控件可用于多行文本的输入,例如组件的内容。
示例代码:
{
"name": "My Section",
"settings": [
{
"type": "textarea",
"id": "content",
"label": "Content",
"default": "my section content",
"placeholder": "please enter content",
"limit": 500
}
],
"presets": [
{
"name": "My Section"
}
]
}
输出:

当访问此控件的配置值时,数据以 string 类型的形式返回。
richtext
此类型的控件会输出一个富文本输入框。会输出具有以下基本格式的文本:
- 加粗文本
- 斜体文本
- 超链接
- 段落
此控件可用于多类型内容的正文文本展示,例如博客文章的正文。
示例代码:
{
"name": "My Section",
"settings": [
{
"type": "richtext",
"id": "content",
"label": "Content",
"default": "content"
}
],
"presets": [
{
"name": "My Section"
}
]
}
输出:

当访问此控件的配置值时,数据以 string 类型的形式返回。
range
此控件会输出一个滑动控制器。
额外属性:
| 属性 | 描述 | 是否必填 |
|---|---|---|
| min | 最小值 | 是 |
| max | 最大值 | 是 |
| step | 滑块步长,设置的值必须大于 0,并且可被最大值和最小值的差值整除。 | 是 |
| unit | 输入值的单位。此单位将展示在控件上 | 否 |
注意:
- default 属性是必填的。
- min、max、step 和 default 属性必须是数字类型。
此控件可用于调整多个数值,例如组件的宽度。
示例代码:
{
"name": "My Section",
"settings": [
{
"type": "range",
"id": "width",
"label": "Width",
"default": 100,
"min": 100,
"max": 1000,
"step": 10,
"unit": "px"
}
],
"presets": [
{
"name": "My Section"
}
]
}
输出:

当访问此控件的配置值时,数据以 number 类型的形式返回。
select
此控件会输出一个下拉选择框。
额外属性:
| 属性 | 描述 | 是否必填 |
|---|---|---|
| options | 选项数组,数组的每项包括 |