amis-editor 5.2.0-beta.1 → 5.2.0

package/src/plugin/Form/InputRichText.tsx

@@ -0,0 +1,185 @@
+import {getSchemaTpl} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {BasePlugin} from '../../plugin';
+
+export class RichTextControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'input-rich-text';
+  $schema = '/schemas/RichTextControlSchema.json';
+
+  // 组件名称
+  name = '富文本编辑器';
+  isBaseComponent = true;
+  icon = 'fa fa-newspaper-o';
+  description = `可自定义富文本的配置栏`;
+  docLink = '/amis/zh-CN/components/form/input-rich-text';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'input-rich-text',
+    label: '富文本',
+    name: 'rich-text'
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: [
+      {
+        ...this.scaffold
+      }
+    ]
+  };
+
+  panelTitle = '富文本';
+  panelBody = [
+    getSchemaTpl('switchDefaultValue'),
+    {
+      type: 'textarea',
+      name: 'value',
+      label: '默认值',
+      visibleOn: 'typeof this.value !== "undefined"'
+    },
+    getSchemaTpl('api', {
+      name: 'receiver',
+      label: '文件接收接口',
+      value: '/api/upload/image',
+      __isUpload: true
+    }),
+    {
+      type: 'select',
+      name: 'vendor',
+      label: '编辑器类型',
+      value: 'tinymce',
+      options: ['tinymce', 'froala']
+    },
+    getSchemaTpl('fieldSet', {
+      title: 'froala 设置项',
+      visibleOn: 'data.vendor === "froala"',
+      body: [
+        {
+          type: 'combo',
+          name: 'options',
+          noBorder: true,
+          multiLine: true,
+          items: [
+            {
+              type: 'select',
+              name: 'language',
+              label: '语言',
+              labelRemark: '鼠标覆盖配置栏中配置时显示的提示语言',
+              defaultValue: 'zh_cn',
+              options: [
+                {label: '中文', value: 'zh_cn'},
+                {label: '英文', value: 'en_us'}
+              ]
+            },
+            {
+              type: 'textarea',
+              name: 'toolbarButtons',
+              label: '大屏时展示的配置项',
+              labelRemark: '屏幕宽度 ≥ 1200px',
+              description:
+                '使用空格分开配置，使用<code>|</code>可将配置栏分组，<a target="_blank" href="https://www.froala.com/wysiwyg-editor/docs/options">参考文档</a>',
+              minRows: 5,
+              value: [
+                'paragraphFormat',
+                'quote',
+                'color',
+                '|',
+                'bold',
+                'italic',
+                'underline',
+                'strikeThrough',
+                '|',
+                'formatOL',
+                'formatUL',
+                'align',
+                '|',
+                'insertLink',
+                'insertImage',
+                'insertEmotion',
+                'insertTable',
+                '|',
+                'undo',
+                'redo',
+                'html'
+              ],
+              pipeIn: (value: any) =>
+                Array.isArray(value) ? value.join(' ') : '',
+              pipeOut: (value: any) => value.replace(/\s+/g, ' ').split(' ')
+            },
+            {
+              type: 'textarea',
+              name: 'toolbarButtonsMD',
+              label: '中屏时展示的配置项',
+              labelRemark: '屏幕宽度 ≥ 992px',
+              description:
+                '使用空格分开配置，使用<code>|</code>可将配置栏分组，<a target="_blank" href="https://www.froala.com/wysiwyg-editor/docs/options">参考文档</a>',
+              minRows: 5,
+              pipeIn: (value: any) =>
+                Array.isArray(value) ? value.join(' ') : '',
+              pipeOut: (value: any) => value.replace(/\s+/g, ' ').split(' ')
+            },
+            {
+              type: 'textarea',
+              name: 'toolbarButtonsSM',
+              label: '小屏时展示的配置项',
+              labelRemark: '屏幕宽度 ≥ 768px',
+              description:
+                '使用空格分开配置，使用<code>|</code>可将配置栏分组，<a target="_blank" href="https://www.froala.com/wysiwyg-editor/docs/options">参考文档</a>',
+              minRows: 5,
+              pipeIn: (value: any) =>
+                Array.isArray(value) ? value.join(' ') : '',
+              pipeOut: (value: any) => value.replace(/\s+/g, ' ').split(' ')
+            }
+          ]
+        }
+      ]
+    }),
+    getSchemaTpl('fieldSet', {
+      title: 'tinymce 设置项',
+      visibleOn: 'data.vendor === "tinymce"',
+      body: [
+        {
+          type: 'combo',
+          name: 'options',
+          noBorder: true,
+          multiLine: true,
+          items: [
+            getSchemaTpl('switch', {
+              label: '是否显示菜单栏',
+              value: 'true',
+              name: 'menubar'
+            }),
+            {
+              type: 'input-number',
+              label: '高度',
+              min: 0,
+              value: 400,
+              name: 'height'
+            },
+            {
+              type: 'textarea',
+              name: 'plugins',
+              label: '启用的插件',
+              description:
+                '使用空格分开配置，<a target="_blank" href="https://www.tiny.cloud/docs/general-configuration-guide/basic-setup/">参考文档</a>',
+              value:
+                'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking table emoticons template paste help'
+            },
+            {
+              type: 'textarea',
+              name: 'toolbar',
+              label: '工具栏',
+              value:
+                'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons | help'
+            }
+          ]
+        }
+      ]
+    })
+  ];
+}
+
+registerEditorPlugin(RichTextControlPlugin);

package/src/plugin/Form/InputSubForm.tsx

@@ -0,0 +1,189 @@
+import {Button} from 'amis';
+import React from 'react';
+import {registerEditorPlugin} from '../../manager';
+import {
+  BaseEventContext,
+  BasePlugin,
+  BasicToolbarItem,
+  ContextMenuEventContext,
+  ContextMenuItem
+} from '../../plugin';
+import {diff, JSONPipeOut} from '../../util';
+
+export class SubFormControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'input-sub-form';
+  $schema = '/schemas/SubFormControlSchema.json';
+
+  // 组件名称
+  name = '子表单项';
+  isBaseComponent = true;
+  icon = 'fa fa-window-restore';
+  description = `SubForm, 配置一个子<code>form</code>作为当前的表单项`;
+  docLink = '/amis/zh-CN/components/form/input-sub-form';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'input-sub-form',
+    name: 'subform',
+    label: '子表单',
+    form: {
+      title: '标题',
+      body: [
+        {
+          type: 'input-text',
+          label: '文本',
+          name: 'text'
+        }
+      ]
+    }
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: [
+      {
+        ...this.scaffold
+      }
+    ]
+  };
+
+  panelTitle = '子表单项';
+  panelBodyCreator = (context: BaseEventContext) => {
+    return [
+      {
+        children: ({value, onChange}: any) => {
+          return (
+            <Button
+              size="sm"
+              level="danger"
+              className="m-b"
+              block
+              onClick={this.editDetail.bind(this, context.id)}
+            >
+              配置成员渲染器
+            </Button>
+          );
+        }
+      },
+      {
+        name: 'labelField',
+        type: 'input-text',
+        value: 'label',
+        label: '名称字段名',
+        description: '当值中存在这个字段，则按钮名称将使用此字段的值来展示。'
+      },
+      {
+        name: 'btnLabel',
+        label: '按钮标签名',
+        value: '设置',
+        type: 'input-text'
+      },
+      {
+        name: 'minLength',
+        visibleOn: 'data.multiple',
+        label: '允许最少个数',
+        type: 'input-number'
+      },
+
+      {
+        name: 'maxLength',
+        visibleOn: 'data.multiple',
+        label: '允许最多个数',
+        type: 'input-number'
+      }
+    ];
+  };
+
+  filterProps(props: any) {
+    props = JSONPipeOut(props);
+
+    // 至少显示一个成员，否则啥都不显示。
+    if (!props.value) {
+      props.value = [''];
+    }
+
+    return props;
+  }
+
+  buildEditorToolbar(
+    {id, info}: BaseEventContext,
+    toolbars: Array<BasicToolbarItem>
+  ) {
+    if (info.renderer.name === 'input-sub-form') {
+      toolbars.push({
+        icon: 'fa fa-expand',
+        order: 100,
+        tooltip: '配置成员渲染器',
+        onClick: this.editDetail.bind(this, id)
+      });
+    }
+  }
+
+  buildEditorContextMenu(
+    {id, schema, region, info}: ContextMenuEventContext,
+    menus: Array<ContextMenuItem>
+  ) {
+    if (info.renderer.name === 'input-sub-form') {
+      menus.push('|', {
+        label: '配置成员渲染器',
+        onSelect: this.editDetail.bind(this, id)
+      });
+    }
+  }
+
+  editDetail(id: string) {
+    const manager = this.manager;
+    const store = manager.store;
+    const node = store.getNodeById(id);
+    const value = store.getValueOf(id);
+    if (!node || !value) {
+      return;
+    }
+
+    const {
+      title,
+      actions,
+      name,
+      size,
+      closeOnEsc,
+      showCloseButton,
+      bodyClassName,
+      type,
+      ...rest
+    } = value.form;
+    const schema = {
+      title,
+      actions,
+      name,
+      size,
+      closeOnEsc,
+      showCloseButton,
+      bodyClassName,
+      type: 'dialog',
+      body: {
+        type: 'form',
+        ...rest
+      }
+    };
+
+    this.manager.openSubEditor({
+      title: '配置子表单项',
+      value: schema,
+      memberImmutable: ['body'],
+      onChange: newValue => {
+        const form = newValue.body[0];
+        newValue = {
+          ...value,
+          form
+        };
+        // delete newValue.form.body;
+        delete newValue.form.type;
+        manager.panelChangeValue(newValue, diff(value, newValue));
+      }
+    });
+  }
+}
+
+registerEditorPlugin(SubFormControlPlugin);