mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-04 21:19:01 +08:00
78955f4ea9
* chore: 更新依赖，tinymce 到 6.1.2，echarts 到 5.3.1，qrcode.react 到 3.1.0，react 到 18.2.0 * 调整一下 tinymce 默认 toolbar * 调整一下 tinymce 默认 toolbar
203 lines
6.1 KiB
Markdown
Executable File
203 lines
6.1 KiB
Markdown
Executable File
---
|
||
title: InputRichText 富文本编辑器
|
||
description:
|
||
type: 0
|
||
group: null
|
||
menuName: InputRichText
|
||
icon:
|
||
order: 47
|
||
---
|
||
|
||
目前富文本编辑器基于两个库：[froala](https://froala.com/) 和 [tinymce](https://github.com/tinymce/tinymce)，默认使用 tinymce。
|
||
|
||
## 基本用法
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "form",
|
||
"api": "/api/mock2/form/saveForm",
|
||
"body": [
|
||
{
|
||
"type": "input-rich-text",
|
||
"name": "rich",
|
||
"label": "Rich Text"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 图片上传
|
||
|
||
通过设置 `receiver` 来支持文件上传，如果是 tinymce，它会将图片放在 `file` 字段中
|
||
|
||
> 1.6.1 及以上版本可以通过 fileField 字段修改
|
||
|
||
它的返回值类似如下：
|
||
|
||
```json
|
||
{
|
||
"link": "https://xxx.png"
|
||
}
|
||
```
|
||
|
||
也可以是
|
||
|
||
```json
|
||
{
|
||
"status": 0,
|
||
"data": {
|
||
"link": "https://xxx.png"
|
||
}
|
||
}
|
||
```
|
||
|
||
下面是个示例，但不会真正上传，每次都返回同一张图片
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "form",
|
||
"body": [
|
||
{
|
||
"type": "input-rich-text",
|
||
"receiver": "/api/mock2/sample/mirror?json={%22link%22:%22/amis/static/logo_c812f54.png%22}",
|
||
"name": "rich",
|
||
"label": "Rich Text"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## tinymce 自定义配置
|
||
|
||
可以设置 options 属性来自定义编辑器的展现，详细配置项请参考[官方文档](https://www.tiny.cloud/docs/tinymce/6/basic-setup/)。
|
||
|
||
> amis 2.1.0 版本升级到了 tinymce 6，导致 plugins 的写法有变化
|
||
|
||
注意在下面的编辑器里修改 JSON 配置后不会实时生效。
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "form",
|
||
"api": "/api/mock2/form/saveForm",
|
||
"body": [
|
||
{
|
||
"type": "input-rich-text",
|
||
"name": "rich",
|
||
"options": {
|
||
"menubar": false,
|
||
"height": 200,
|
||
"plugins": [
|
||
"advlist", "autolink", "link", "image", "lists", "charmap", "preview", "anchor", "pagebreak", "searchreplace", "wordcount", "visualblocks", "visualchars", "code", "fullscreen", "insertdatetime", "media", "nonbreaking", "table", "emoticons", "template", "help"
|
||
],
|
||
"toolbar": "undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help"
|
||
}
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 关于 tinymce 粘贴 word 的问题
|
||
|
||
因为 amis 中使用的是开源版本 tinymce，没有商业版本功能，导致比如从 Word 中粘贴表格会看不到边框，解决方法是自己
|
||
|
||
```json
|
||
{
|
||
"type": "input-rich-text",
|
||
"name": "rich",
|
||
"options": {
|
||
"content_css": "/xxx.css"
|
||
}
|
||
}
|
||
```
|
||
|
||
比如下面的示例
|
||
|
||
```css
|
||
.mce-item-table th {
|
||
font-weight: bold;
|
||
}
|
||
.mce-item-table th,
|
||
.mce-item-table td {
|
||
padding: 6px 13px;
|
||
border: 1px solid #ddd;
|
||
}
|
||
.mce-item-table tr {
|
||
border-top: 1px solid #ccc;
|
||
}
|
||
```
|
||
|
||
但最终页面渲染的时候，这个 class 没有了，得改成 table
|
||
|
||
```css
|
||
table th {
|
||
font-weight: bold;
|
||
}
|
||
table th,
|
||
table td {
|
||
padding: 6px 13px;
|
||
border: 1px solid #ddd;
|
||
}
|
||
table tr {
|
||
border-top: 1px solid #ccc;
|
||
}
|
||
```
|
||
|
||
## 使用 froala 编辑器
|
||
|
||
只需要加一行 `"vendor": "froala"` 配置就行，froala 是付费产品，需要设置 [richTextToken](../../start/getting-started#richtexttoken-string) 才能去掉水印。
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "form",
|
||
"api": "/api/mock2/form/saveForm",
|
||
"body": [
|
||
{
|
||
"type": "input-rich-text",
|
||
"vendor": "froala",
|
||
"name": "rich",
|
||
"label": "Rich Text"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
### froala buttons 配置项
|
||
|
||
froala 可以通过设置 buttons 参数来控制显示哪些按钮，默认是这些：
|
||
|
||
```json
|
||
[
|
||
"undo",
|
||
"redo",
|
||
"paragraphFormat",
|
||
"textColor",
|
||
"backgroundColor",
|
||
"bold",
|
||
"underline",
|
||
"strikeThrough",
|
||
"formatOL",
|
||
"formatUL",
|
||
"align",
|
||
"quote",
|
||
"insertLink",
|
||
"insertImage",
|
||
"insertEmotion",
|
||
"insertTable",
|
||
"html"
|
||
]
|
||
```
|
||
|
||
## 属性表
|
||
|
||
当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||
|
||
| 属性名 | 类型 | 默认值 | 说明 |
|
||
| ------------- | ------------------------------ | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||
| saveAsUbb | `boolean` | | 是否保存为 ubb 格式 |
|
||
| receiver | [API](../../../docs/types/api) | | 默认的图片保存 API |
|
||
| videoReceiver | [API](../../../docs/types/api) | | 默认的视频保存 API |
|
||
| fileField | string | | 上传文件时的字段名 |
|
||
| 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/) 字符串 |
|