amis/docs/zh-CN/components/form/rich-text.md
2021-01-19 10:20:09 +08:00

4.1 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 格式
reciever API 默认的图片保存 API
size string 框的大小,可设置为 md 或者 lg
options object 需要参考 tinymcefroala 的文档
buttons Array<string> froala 专用配置显示的按钮tinymce 可以通过前面的 options 设置 toolbar 字符串