@bmstravel/form-editor

A visual editor component to edit dynamic form json schema used by scalable-form-platform

Usage no npm install needed!

<script type="module">
  import bmstravelFormEditor from 'https://cdn.skypack.dev/@bmstravel/form-editor';
</script>

README

scalable-form-editor

scalable-form-platform JSON Schema 协议的前端组件

A visual editor component to edit dynamic form json schema used by scalable-form-platform

GitHub npm Travis (.org) GitHub last commit GitHub issues

查看文档 https://scalable-form-platform.github.io/#/

✨ 特性/features

  • 🛳 企业级解决方案和高稳定性
  • 📦 开箱即用的动态表单渲染sdk
  • ⚙️ 完整的开发工具支持
  • 🗄 服务端支持和用于管理表单的可独立部署站点

  • 🛳 Enterprise-class Solutions for web form
  • 📦 A set of high-quality react components for rendering web forms from JSON schema out of the box
  • ⚙️ Whole package of development tools
  • 🗄 Server support and independently deployable sites

快速开始

安装

使用 npm 安装

npm i scalable-form-editor -S

如果你的网络环境不佳,推荐使用 cnpm

引入使用

import ScalableFormEditor from "scalable-form-editor";

注意, scalable-form-editor组件外部依赖react、react-dom、prop-types、antd、scalable-form-core, scalable-form-antd,这几个库需要在package.json或CDN中自行引入

注意,关于与antd的样式的适配:1. 组件中默认build出来的index.js包中没有打包antd的样式,需要自行加载对应的样式文件;2. 对于使用babel-plugin-import按需加载antd的工程,组件中提供build出来的index-with-antd-bundle.js,这个包中使用babel-plugin-import打包了组件中需要使用的antd样式

使用表单编辑器组件

在第一个例子中,我们需要渲染一个表单可视化编辑器。

import React from "react";
import ScalableFormEditor from "scalable-form-editor";
import "./styles.css";

class FormEditorExample extends Component {
  constructor(...args) {
    super(...args);
    this.state = {
        uiSchema: {},
        jsonSchema: {},
        bizData: {},
        sequence: [],
        formData: {}
    };
  }

  handleSubmit = (formCode, {jsonSchema,uiSchema, formData, bizData, sequence}) => {
    console.log('submit by editor', jsonSchema, uiSchema, formData, bizData, sequence);
  };

  render() {
    return (
      <ScalableFormEditor
        jsonSchema={this.state.jsonSchema}
        uiSchema={this.state.uiSchema}
        formData={this.state.formData}
        bizData={this.state.bizData}
        sequence={this.state.sequence}
        onSubmit={this.handleSubmit}
      />
    );
  }
}

📦 包管理/Packages

我们使用Lerna来进行包管理,所以本仓库会发布多个包到npm,包括:

This repository is a monorepo that we manage using Lerna. That means that we actually publish several packages to npm from the same codebase, including:

Package NPMVersions Documents Description
scalable-form-antd npm 基于react-jsonschema-form,结合ant-design的动态表单渲染sdk
scalable-form-antd-mobile npm 基于react-jsonschema-form,结合ant-design-mobile的动态表单渲染sdk,适用于移动端的渲染sdk
scalable-form-editor npm 表单可视化编辑器,可视化编排表单,产出scalable-form-antd和scalable-form-antd-mobile可用的schema
scalable-form-server npm 服务端sdk,用户可以基于scalable-form-server保存表单配置。服务端sdk提供一个可用的表单站点,提供表单编排,表单管理,表单投放,数据回流分析的能力。