mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 05:28:37 +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
6.1 KiB
Executable File
6.1 KiB
Executable File
title | description | type | group | menuName | icon | order |
---|---|---|---|---|---|---|
InputRichText 富文本编辑器 | 0 | null | InputRichText | 47 |
目前富文本编辑器基于两个库:froala 和 tinymce,默认使用 tinymce。
基本用法
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"type": "input-rich-text",
"name": "rich",
"label": "Rich Text"
}
]
}
图片上传
通过设置 receiver
来支持文件上传,如果是 tinymce,它会将图片放在 file
字段中
1.6.1 及以上版本可以通过 fileField 字段修改
它的返回值类似如下:
{
"link": "https://xxx.png"
}
也可以是
{
"status": 0,
"data": {
"link": "https://xxx.png"
}
}
下面是个示例,但不会真正上传,每次都返回同一张图片
{
"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 属性来自定义编辑器的展现,详细配置项请参考官方文档。
amis 2.1.0 版本升级到了 tinymce 6,导致 plugins 的写法有变化
注意在下面的编辑器里修改 JSON 配置后不会实时生效。
{
"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 中粘贴表格会看不到边框,解决方法是自己
{
"type": "input-rich-text",
"name": "rich",
"options": {
"content_css": "/xxx.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
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 才能去掉水印。
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"type": "input-rich-text",
"vendor": "froala",
"name": "rich",
"label": "Rich Text"
}
]
}
froala buttons 配置项
froala 可以通过设置 buttons 参数来控制显示哪些按钮,默认是这些:
[
"undo",
"redo",
"paragraphFormat",
"textColor",
"backgroundColor",
"bold",
"underline",
"strikeThrough",
"formatOL",
"formatUL",
"align",
"quote",
"insertLink",
"insertImage",
"insertEmotion",
"insertTable",
"html"
]
属性表
当做选择器表单项使用时,除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
saveAsUbb | boolean |
是否保存为 ubb 格式 | |
receiver | API | 默认的图片保存 API | |
videoReceiver | API | 默认的视频保存 API | |
fileField | string | 上传文件时的字段名 | |
size | string |
框的大小,可设置为 md 或者 lg |
|
options | object |
需要参考 tinymce 或 froala 的文档 | |
buttons | Array<string> |
froala 专用,配置显示的按钮,tinymce 可以通过前面的 options 设置 toolbar 字符串 |