mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:39:05 +08:00
merge from baidu/amis
This commit is contained in:
2betop
commit
b46b8bc70a
@ -521,7 +521,31 @@ Form 支持轮训初始化接口，步骤如下：
|
||||
}
|
||||
```
|
||||
|
||||
当你需要配置特定的请求方式，请求体，`header`时，使用对象类型 api 配置，并使用 数据映射 进行数据配置。下面示例我们更改了请求方法为`PUT`，并在原提交数据的基础上添加一个字段`"_from"`。更多用法查看 [API 文档](../../types/api) 和 [数据映射](../../concepts/data-mapping)文档
|
||||
发送请求默认为 `POST` 方式，会将所有表单项整理成一个对象发送过过去。除此之外你可以主动获取以下信息。
|
||||
|
||||
- `diff` 只会包含 `diff` 结果
|
||||
- `prinstine` 原始数据
|
||||
如:
|
||||
|
||||
```json
|
||||
{
|
||||
"api": {
|
||||
"method": "post",
|
||||
"url": "/api/xxx/save",
|
||||
"data": {
|
||||
"modified": "$$",
|
||||
"diff": "${diff}",
|
||||
"origin": "${prinstine}"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
> 如果 返回了 `data` 对象，且是对象，会把结果 merge 到表单数据里面。
|
||||
|
||||
当你需要配置特定的请求方式，请求体，`header`时，使用对象类型 api 配置，并使用 数据映射 进行数据配置。
|
||||
|
||||
下面示例我们更改了请求方法为`PUT`，并在原提交数据的基础上添加一个字段`"_from"`。更多用法查看 [API 文档](../../types/api) 和 [数据映射](../../concepts/data-mapping)文档
|
||||
|
||||
```schema:height="330" scope="body"
|
||||
{
|
||||
|
||||
@ -8,6 +8,8 @@ icon:
|
||||
order: 47
|
||||
---
|
||||
|
||||
目前富文本编辑器基于两个库：[froala](https://froala.com/) 和 [tinymce](https://github.com/tinymce/tinymce)，默认使用 tinymce。
|
||||
|
||||
## 基本用法
|
||||
|
||||
```schema:height="600" scope="body"
|
||||
@ -24,41 +26,91 @@ order: 47
|
||||
}
|
||||
```
|
||||
|
||||
## 配置 buttons
|
||||
### tinymce 自定义配置
|
||||
|
||||
```js
|
||||
可以设置 options 属性来自定义编辑器的展现，详细配置项请参考[官方文档](https://www.froala.com/wysiwyg-editor/docs/options)。
|
||||
|
||||
注意在下面的编辑器里修改 JSON 配置后不会实时生效。
|
||||
|
||||
```schema:height="320" scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://houtai.baidu.com/api/mock2/form/saveForm",
|
||||
"controls": [
|
||||
{
|
||||
"type": "rich-text",
|
||||
"name": "rich",
|
||||
"options": {
|
||||
"menubar": false,
|
||||
"height": 200,
|
||||
"plugins": [
|
||||
"advlist autolink lists link image charmap print preview anchor",
|
||||
"searchreplace visualblocks code fullscreen",
|
||||
"insertdatetime media table paste code help wordcount"
|
||||
],
|
||||
"toolbar ": "undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 使用 froala 编辑器
|
||||
|
||||
只需要加一行 `"vendor": "froala"` 配置就行，froala 是付费产品，需要设置 [richTextToken](../../start/getting-started#richtexttoken-string) 才能去掉水印。
|
||||
|
||||
```schema:height="430" scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://houtai.baidu.com/api/mock2/form/saveForm",
|
||||
"controls": [
|
||||
{
|
||||
"type": "rich-text",
|
||||
"vendor": "froala",
|
||||
"name": "rich",
|
||||
"label": "Rich Text"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### froala buttons 配置项
|
||||
|
||||
froala 可以通过设置 buttons 参数来控制显示哪些按钮，默认是这些：
|
||||
|
||||
```json
|
||||
[
|
||||
'paragraphFormat',
|
||||
'quote',
|
||||
'color',
|
||||
'|',
|
||||
'bold',
|
||||
'italic',
|
||||
'underline',
|
||||
'strikeThrough',
|
||||
'|',
|
||||
'formatOL',
|
||||
'formatUL',
|
||||
'align',
|
||||
'|',
|
||||
'insertLink',
|
||||
'insertImage',
|
||||
'insertTable',
|
||||
'|',
|
||||
'undo',
|
||||
'redo',
|
||||
'html'
|
||||
];
|
||||
"paragraphFormat",
|
||||
"quote",
|
||||
"color",
|
||||
"|",
|
||||
"bold",
|
||||
"italic",
|
||||
"underline",
|
||||
"strikeThrough",
|
||||
"|",
|
||||
"formatOL",
|
||||
"formatUL",
|
||||
"align",
|
||||
"|",
|
||||
"insertLink",
|
||||
"insertImage",
|
||||
"insertTable",
|
||||
"|",
|
||||
"undo",
|
||||
"redo",
|
||||
"html"
|
||||
]
|
||||
```
|
||||
|
||||
## 属性表
|
||||
|
||||
当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
|
||||
| saveAsUbb | `boolean` | | 是否保存为 ubb 格式 |
|
||||
| reciever | [API](../../types/api) | | 默认的图片保存 API |
|
||||
| size | `string` | | 框的大小，可设置为 `md` 或者 `lg` |
|
||||
| options | `object` | | Object 类型，给富文本的配置信息。请参考 https://www.froala.com/wysiwyg-editor/docs/options |
|
||||
| buttons | `Array<string>` | `[ 'paragraphFormat', 'quote', 'color', ' | ', 'bold', 'italic', 'underline', 'strikeThrough', ' | ', 'formatOL', 'formatUL', 'align', ' | ', 'insertLink', 'insertImage', 'insertTable', ' | ', 'undo', 'redo', 'html' ]` | 精度，即小数点后几位 |
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------- | ---------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| saveAsUbb | `boolean` | | 是否保存为 ubb 格式 |
|
||||
| reciever | [API](../../types/api) | | 默认的图片保存 API |
|
||||
| size | `string` | | 框的大小，可设置为 `md` 或者 `lg` |
|
||||
| options | `object` | | 需要参考 [tinymce](https://www.tiny.cloud/docs/configure/integration-and-setup/) 或 [froala](https://www.froala.com/wysiwyg-editor/docs/options) 的文档 |
|
||||
| buttons | `Array<string>` | | froala 专用，配置显示的按钮，tinymce 可以通过前面的 options 设置 [toolbar](https://www.tiny.cloud/docs/demo/custom-toolbar-button/) 字符串 |
|
||||
|
||||
@ -5,13 +5,145 @@ description:
|
||||
|
||||
amis 有两种使用方法：
|
||||
|
||||
- [npm](#npm)
|
||||
- [JS SDK](#SDK)
|
||||
- [npm](#npm)
|
||||
|
||||
|
||||
npm 适合用在 React 项目中，可以完整使用 amis 的所有功能，方便扩展。
|
||||
|
||||
SDK 适合对前端或 React 不了解的开发者，它不依赖 npm 及 webpack，直接引入代码就能使用，但需要注意这种方式难以支持 [自定义组件](./custom)，只能使用 amis 内置的组件。
|
||||
|
||||
## SDK
|
||||
|
||||
JSSDK 版本的代码从以下地址获取：
|
||||
|
||||
- JS： https://houtai.baidu.com/v2/jssdk
|
||||
- CSS： https://houtai.baidu.com/v2/csssdk
|
||||
|
||||
上面的地址是一个页面跳转，会跳转到一个 CDN 地址，
|
||||
|
||||
> 通过这种方式拿到的是最新 beta 版，如果需要固定某个版本可以从 npm 下载，拷贝其中 sdk 目录下的文件。
|
||||
|
||||
简单示例如下，将其中的 `amis/sdk.css` 和 `amis/sdk.js` 改成实际的路径:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>amis demo</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1"
|
||||
/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
||||
<link rel="stylesheet" href="amis/sdk.css" />
|
||||
<style>
|
||||
html,
|
||||
body,
|
||||
.app-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" class="app-wrapper"></div>
|
||||
<script src="amis/sdk.js"></script>
|
||||
<script type="text/javascript">
|
||||
(function () {
|
||||
let amis = amisRequire('amis/embed');
|
||||
let amisScoped = amis.embed('#root', {
|
||||
type: 'page',
|
||||
title: 'amis demo',
|
||||
body: 'hello world'
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### 控制 amis 的行为
|
||||
|
||||
`amis.embed` 函数还支持以下配置项来控制 amis 的行为，比如在 fetcher 的时候加入自己的处理逻辑，这些函数参数的说明在前面也有介绍。
|
||||
|
||||
```js
|
||||
let amisScoped = amis.embed(
|
||||
'#root',
|
||||
{
|
||||
type: 'page',
|
||||
title: 'amis demo',
|
||||
body: 'This is a simple amis page.'
|
||||
},
|
||||
{
|
||||
// props 一般不用传。
|
||||
},
|
||||
{
|
||||
fetcher: (url, method, data, config) => {
|
||||
// 可以不传，用来实现 ajax 请求
|
||||
},
|
||||
|
||||
jumpTo: location => {
|
||||
// 可以不传，用来实现页面跳转
|
||||
},
|
||||
|
||||
updateLocation: (location, replace) => {
|
||||
// 可以不传，用来实现地址栏更新
|
||||
},
|
||||
|
||||
isCurrentUrl: url => {
|
||||
// 可以不传，用来判断是否目标地址当前地址。
|
||||
},
|
||||
|
||||
copy: content => {
|
||||
// 可以不传，用来实现复制到剪切板
|
||||
},
|
||||
|
||||
notify: (type, msg) => {
|
||||
// 可以不传，用来实现通知
|
||||
},
|
||||
|
||||
alert: content => {
|
||||
// 可以不传，用来实现提示
|
||||
},
|
||||
|
||||
confirm: content => {
|
||||
// 可以不传，用来实现确认框。
|
||||
}
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
同时返回的 `amisScoped` 对象可以获取到 amis 渲染的内部信息，它有如下方法：
|
||||
|
||||
`getComponentByName(name)` 用于获取渲染出来的组件，比如下面的示例
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "page",
|
||||
"name": "page1",
|
||||
"title": "表单页面",
|
||||
"body": {
|
||||
"type": "form",
|
||||
"name": "form1",
|
||||
"controls": [
|
||||
{
|
||||
"label": "Name",
|
||||
"type": "text",
|
||||
"name": "name1"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
可以通过 `amisScoped.getComponentByName('page1.form1').getValues()` 来获取到所有表单的值，需要注意 page 和 form 都需要有 name 属性。
|
||||
|
||||
## npm
|
||||
|
||||
### 安装
|
||||
@ -73,7 +205,7 @@ npm i axios copy-to-clipboard
|
||||
|
||||
> 为了方便示例，上面选用了我们常用几个插件库，你完全可以选择自己喜欢的插件并重新实现
|
||||
|
||||
2. 代码实现
|
||||
2. 代码实现（React Typescript）
|
||||
|
||||
```tsx
|
||||
import * as React from 'react';
|
||||
@ -336,130 +468,3 @@ class MyComponent extends React.Component<any, any> {
|
||||
##### richTextToken: string
|
||||
|
||||
内置 rich-text 为 frolaEditor，想要使用，请自行购买，或者自己实现 rich-text 渲染器。
|
||||
|
||||
## SDK
|
||||
|
||||
JSSDK 的代码从以下地址获取：
|
||||
|
||||
- JS： https://houtai.baidu.com/v2/jssdk
|
||||
- CSS： https://houtai.baidu.com/v2/csssdk
|
||||
|
||||
以上的 SDK 地址是一个页面跳转，会跳转到一个 CDN 地址，而且每次跳转都是最新的版本，随着 amis 的升级这个地址会一直变动。npm 包里面也包含 sdk 文件，要固定某个版本可以先 amis 安装到本地，然后去 sdk 目录拷贝文件。然后类似如下的方式使用:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>amis demo</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1"
|
||||
/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
||||
<link rel="stylesheet" href="amis/sdk.css" />
|
||||
<style>
|
||||
html,
|
||||
body,
|
||||
.app-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" class="app-wrapper"></div>
|
||||
<script src="amis/sdk.js"></script>
|
||||
<script type="text/javascript">
|
||||
(function () {
|
||||
let amis = amisRequire('amis/embed');
|
||||
let amisScoped = amis.embed('#root', {
|
||||
type: 'page',
|
||||
title: 'amis demo',
|
||||
body: 'hello world'
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### 控制 amis 的行为
|
||||
|
||||
`amis.embed` 函数还支持以下配置项来控制 amis 的行为，比如在 fetcher 的时候加入自己的处理逻辑，这些函数参数的说明在前面也有介绍。
|
||||
|
||||
```js
|
||||
let amisScoped = amis.embed(
|
||||
'#root',
|
||||
{
|
||||
type: 'page',
|
||||
title: 'amis demo',
|
||||
body: 'This is a simple amis page.'
|
||||
},
|
||||
{
|
||||
// props 一般不用传。
|
||||
},
|
||||
{
|
||||
fetcher: (url, method, data, config) => {
|
||||
// 可以不传，用来实现 ajax 请求
|
||||
},
|
||||
|
||||
jumpTo: location => {
|
||||
// 可以不传，用来实现页面跳转
|
||||
},
|
||||
|
||||
updateLocation: (location, replace) => {
|
||||
// 可以不传，用来实现地址栏更新
|
||||
},
|
||||
|
||||
isCurrentUrl: url => {
|
||||
// 可以不传，用来判断是否目标地址当前地址。
|
||||
},
|
||||
|
||||
copy: content => {
|
||||
// 可以不传，用来实现复制到剪切板
|
||||
},
|
||||
|
||||
notify: (type, msg) => {
|
||||
// 可以不传，用来实现通知
|
||||
},
|
||||
|
||||
alert: content => {
|
||||
// 可以不传，用来实现提示
|
||||
},
|
||||
|
||||
confirm: content => {
|
||||
// 可以不传，用来实现确认框。
|
||||
}
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
同时返回的 `amisScoped` 对象可以获取到 amis 渲染的内部信息，它有如下方法：
|
||||
|
||||
`getComponentByName(name)` 用于获取渲染出来的组件，比如下面的示例
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "page",
|
||||
"name": "page1",
|
||||
"title": "表单页面",
|
||||
"body": {
|
||||
"type": "form",
|
||||
"name": "form1",
|
||||
"controls": [
|
||||
{
|
||||
"label": "Name",
|
||||
"type": "text",
|
||||
"name": "name1"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
可以通过 `amisScoped.getComponentByName('page1.form1').getValues()` 来获取到所有表单的值，需要注意 page 和 form 都需要有 name 属性。
|
||||
|
||||
@ -136,7 +136,7 @@
|
||||
"jest-canvas-mock": "^2.1.0",
|
||||
"js-yaml": "^3.10.0",
|
||||
"lint-staged": "^8.1.6",
|
||||
"marked": "^0.3.7",
|
||||
"marked": "^1.1.1",
|
||||
"mkdirp": "^1.0.4",
|
||||
"mobx-wiretap": "^0.12.0",
|
||||
"prettier": "^2.0.5",
|
||||
|
||||
@ -13,7 +13,6 @@ marked.setOptions({
|
||||
tables: true,
|
||||
breaks: false,
|
||||
pedantic: false,
|
||||
sanitize: true,
|
||||
smartLists: true,
|
||||
smartypants: false
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user