diff --git a/docs/components/form/index.md b/docs/components/form/index.md index 7e6013fca..56a465dc7 100755 --- a/docs/components/form/index.md +++ b/docs/components/form/index.md @@ -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" { diff --git a/docs/components/form/rich-text.md b/docs/components/form/rich-text.md index 9b1efd0fb..b948cf8e4 100755 --- a/docs/components/form/rich-text.md +++ b/docs/components/form/rich-text.md @@ -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` | `[ '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` | | froala 专用，配置显示的按钮，tinymce 可以通过前面的 options 设置 [toolbar](https://www.tiny.cloud/docs/demo/custom-toolbar-button/) 字符串 | diff --git a/docs/start/getting-started.md b/docs/start/getting-started.md index dce16a9ed..05a5750f2 100644 --- a/docs/start/getting-started.md +++ b/docs/start/getting-started.md @@ -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 + + + + + amis demo + + + + + + + +
+ + + + +``` + +### 控制 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 { ##### 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 - - - - - amis demo - - - - - - - -
- - - - -``` - -### 控制 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 属性。 diff --git a/package.json b/package.json index 0b355f1b1..e3d1cb378 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/scripts/md-parser.js b/scripts/md-parser.js index 0031fa2b8..393e1d975 100644 --- a/scripts/md-parser.js +++ b/scripts/md-parser.js @@ -13,7 +13,6 @@ marked.setOptions({ tables: true, breaks: false, pedantic: false, - sanitize: true, smartLists: true, smartypants: false });