amis/docs/zh-CN/components/form/rich-text.md
RickCole 54e56402d2
文档拆分组件部分 (#1502)
* 文档样式一点小优化

* 文档拆分组件部分
2021-02-01 20:44:49 +08:00

4.4 KiB
Executable File
Raw Blame History

title description type group menuName icon order
Rich-Text 富文本编辑器 0 null Rich-Text 47

目前富文本编辑器基于两个库:froalatinymce,默认使用 tinymce。

基本用法

{
    "type": "form",
    "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
    "controls": [
        {
            "type": "rich-text",
            "name": "rich",
            "label": "Rich Text"
        }
    ]
}

tinymce 自定义配置

可以设置 options 属性来自定义编辑器的展现,详细配置项请参考官方文档

注意在下面的编辑器里修改 JSON 配置后不会实时生效。

{
    "type": "form",
    "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/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 才能去掉水印。

{
    "type": "form",
    "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
    "controls": [
        {
            "type": "rich-text",
            "vendor": "froala",
            "name": "rich",
            "label": "Rich Text"
        }
    ]
}

froala buttons 配置项

froala 可以通过设置 buttons 参数来控制显示哪些按钮,默认是这些:

[
  "paragraphFormat",
  "quote",
  "color",
  "|",
  "bold",
  "italic",
  "underline",
  "strikeThrough",
  "|",
  "formatOL",
  "formatUL",
  "align",
  "|",
  "insertLink",
  "insertImage",
  "insertTable",
  "|",
  "undo",
  "redo",
  "html"
]

属性表

当做选择器表单项使用时,除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置

属性名 类型 默认值 说明
saveAsUbb boolean 是否保存为 ubb 格式
receiver API 默认的图片保存 API
videoReceiver API 默认的视频保存 API
size string 框的大小,可设置为 md 或者 lg
options object 需要参考 tinymcefroala 的文档
buttons Array<string> froala 专用配置显示的按钮tinymce 可以通过前面的 options 设置 toolbar 字符串