no message

.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*
+
+package-lock.json
+yarn.lock

LICENSE

@@ -0,0 +1,165 @@
+                   GNU LESSER GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+
+  This version of the GNU Lesser General Public License incorporates
+the terms and conditions of version 3 of the GNU General Public
+License, supplemented by the additional permissions listed below.
+
+  0. Additional Definitions.
+
+  As used herein, "this License" refers to version 3 of the GNU Lesser
+General Public License, and the "GNU GPL" refers to version 3 of the GNU
+General Public License.
+
+  "The Library" refers to a covered work governed by this License,
+other than an Application or a Combined Work as defined below.
+
+  An "Application" is any work that makes use of an interface provided
+by the Library, but which is not otherwise based on the Library.
+Defining a subclass of a class defined by the Library is deemed a mode
+of using an interface provided by the Library.
+
+  A "Combined Work" is a work produced by combining or linking an
+Application with the Library.  The particular version of the Library
+with which the Combined Work was made is also called the "Linked
+Version".
+
+  The "Minimal Corresponding Source" for a Combined Work means the
+Corresponding Source for the Combined Work, excluding any source code
+for portions of the Combined Work that, considered in isolation, are
+based on the Application, and not on the Linked Version.
+
+  The "Corresponding Application Code" for a Combined Work means the
+object code and/or source code for the Application, including any data
+and utility programs needed for reproducing the Combined Work from the
+Application, but excluding the System Libraries of the Combined Work.
+
+  1. Exception to Section 3 of the GNU GPL.
+
+  You may convey a covered work under sections 3 and 4 of this License
+without being bound by section 3 of the GNU GPL.
+
+  2. Conveying Modified Versions.
+
+  If you modify a copy of the Library, and, in your modifications, a
+facility refers to a function or data to be supplied by an Application
+that uses the facility (other than as an argument passed when the
+facility is invoked), then you may convey a copy of the modified
+version:
+
+   a) under this License, provided that you make a good faith effort to
+   ensure that, in the event an Application does not supply the
+   function or data, the facility still operates, and performs
+   whatever part of its purpose remains meaningful, or
+
+   b) under the GNU GPL, with none of the additional permissions of
+   this License applicable to that copy.
+
+  3. Object Code Incorporating Material from Library Header Files.
+
+  The object code form of an Application may incorporate material from
+a header file that is part of the Library.  You may convey such object
+code under terms of your choice, provided that, if the incorporated
+material is not limited to numerical parameters, data structure
+layouts and accessors, or small macros, inline functions and templates
+(ten or fewer lines in length), you do both of the following:
+
+   a) Give prominent notice with each copy of the object code that the
+   Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the object code with a copy of the GNU GPL and this license
+   document.
+
+  4. Combined Works.
+
+  You may convey a Combined Work under terms of your choice that,
+taken together, effectively do not restrict modification of the
+portions of the Library contained in the Combined Work and reverse
+engineering for debugging such modifications, if you also do each of
+the following:
+
+   a) Give prominent notice with each copy of the Combined Work that
+   the Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the Combined Work with a copy of the GNU GPL and this license
+   document.
+
+   c) For a Combined Work that displays copyright notices during
+   execution, include the copyright notice for the Library among
+   these notices, as well as a reference directing the user to the
+   copies of the GNU GPL and this license document.
+
+   d) Do one of the following:
+
+       0) Convey the Minimal Corresponding Source under the terms of this
+       License, and the Corresponding Application Code in a form
+       suitable for, and under terms that permit, the user to
+       recombine or relink the Application with a modified version of
+       the Linked Version to produce a modified Combined Work, in the
+       manner specified by section 6 of the GNU GPL for conveying
+       Corresponding Source.
+
+       1) Use a suitable shared library mechanism for linking with the
+       Library.  A suitable mechanism is one that (a) uses at run time
+       a copy of the Library already present on the user's computer
+       system, and (b) will operate properly with a modified version
+       of the Library that is interface-compatible with the Linked
+       Version.
+
+   e) Provide Installation Information, but only if you would otherwise
+   be required to provide such information under section 6 of the
+   GNU GPL, and only to the extent that such information is
+   necessary to install and execute a modified version of the
+   Combined Work produced by recombining or relinking the
+   Application with a modified version of the Linked Version. (If
+   you use option 4d0, the Installation Information must accompany
+   the Minimal Corresponding Source and Corresponding Application
+   Code. If you use option 4d1, you must provide the Installation
+   Information in the manner specified by section 6 of the GNU GPL
+   for conveying Corresponding Source.)
+
+  5. Combined Libraries.
+
+  You may place library facilities that are a work based on the
+Library side by side in a single library together with other library
+facilities that are not Applications and are not covered by this
+License, and convey such a combined library under terms of your
+choice, if you do both of the following:
+
+   a) Accompany the combined library with a copy of the same work based
+   on the Library, uncombined with any other library facilities,
+   conveyed under the terms of this License.
+
+   b) Give prominent notice with the combined library that part of it
+   is a work based on the Library, and explaining where to find the
+   accompanying uncombined form of the same work.
+
+  6. Revised Versions of the GNU Lesser General Public License.
+
+  The Free Software Foundation may publish revised and/or new versions
+of the GNU Lesser General Public License from time to time. Such new
+versions will be similar in spirit to the present version, but may
+differ in detail to address new problems or concerns.
+
+  Each version is given a distinguishing version number. If the
+Library as you received it specifies that a certain numbered version
+of the GNU Lesser General Public License "or any later version"
+applies to it, you have the option of following the terms and
+conditions either of that published version or of any later version
+published by the Free Software Foundation. If the Library as you
+received it does not specify a version number of the GNU Lesser
+General Public License, you may choose any version of the GNU Lesser
+General Public License ever published by the Free Software Foundation.
+
+  If the Library as you received it specifies that a proxy can decide
+whether future versions of the GNU Lesser General Public License shall
+apply, that proxy's public statement of acceptance of any version is
+permanent authorization for you to choose that version for the
+Library.

dist/demo.html

@@ -0,0 +1,10 @@
+<meta charset="utf-8">
+<title>FormMaking demo</title>
+<script src="./FormMaking.umd.js"></script>
+
+<link rel="stylesheet" href="./FormMaking.css">
+
+
+<script>
+console.log(FormMaking)
+</script>

docs/component.md

@@ -0,0 +1,192 @@
+# Components
+
+## MakingForm
+
+You can create a form by drag an drop the component from left side to the design area.
+
+### API
+
+#### Props
+
+| <div style="width: 120px;">name </div> | <div style="width: 287px;">description</div> | <div style="width: 100px;">type</div> | <div style="width: 100px;">default</div> |
+| --- | ----------------------------------------- | ---------- | ---------------------------- |
+| preview | display preview button. | Boolean | fasle |  |
+| generate-json | display generate json button. | Boolean | false |  |
+| generate-code | display generate code button. | Boolean | false |  |
+| clearable | display clearable button. | Boolean | false |  |
+| upload | display upload button. | Boolean | false | |
+| basic-fields | Configure the component on the left, for default it will show all the basic fields. | Array | ['input', 'textarea', 'number', 'radio', 'checkbox', 'time', 'date', 'rate', 'color', 'select', 'switch', 'slider', 'text'] |  |
+| advance-fields | configure the component on the left, for default it will show all the advanced fields | Array | ['blank', 'imgupload', 'editor', 'cascader'] | |
+| layout-fields | configure the layout on the left, for default it will show all the layout | Array | ['grid'] | |
+
+
+#### Slots
+
+| name | description |
+| --- | --- |
+| action | Custom area at the top of the designer. |
+
+#### Methods
+
+You can get an instance of GenerateForm with `ref`, and invoke the instance method.
+
+| name | description | parameter |
+| --- | --- | --- |
+| getJSON | Get the JSON data generated by the form generator | - |
+| getHtml | Get the html code generated by the form generator | - |
+| setJSON | Set the configuration for for designer | (value) the Json data get via getJson function |
+| clear  | clear components | - |
+
+### Example
+
+#### Custom Button
+
+``` html
+<template>
+  <fm-making-form 
+    ref="makingform" 
+    style="height: 500px;" 
+  >
+    <template slot="action">
+      <!-- Custom operation area slot -->
+      <el-button type="text" icon="el-icon-upload">save</el-button>
+    </template>
+  </fm-making-form>
+</template>
+```
+
+#### Component Configuration
+
+``` html
+<template>
+  <fm-making-form 
+    ref="makingform" 
+    style="height: 500px;"
+    :basic-fields="['input', 'textarea']"
+    :advance-fields="['blank', 'fileupload']"
+    :layout-fields="[]"
+  >
+  </fm-making-form>
+</template>
+```
+
+#### Instance Methods
+
+```html
+<fm-making-form 
+  ref="makingform" 
+  style="height: 500px;" 
+  preview 
+  generate-code 
+  generate-json
+>
+</fm-making-form>
+```
+
+```js
+const json = this.$refs.makingform.getJSON()
+```
+
+## GenerateForm
+
+The JSON data that generated by the Form generator 
+You can create a form rapidly with the JSON data created by the form generator,and you also can validate and get the form data by just click a button.
+
+### API
+
+#### Props
+
+| <div style="width: 120px;">name </div> | <div style="width: 287px;">description</div> | <div style="width: 100px;">type</div> | <div style="width: 100px;">default</div> |
+| --- | ----------------------------------------- | ---------- | ---------------------------- |
+| data | JSON data used to create a form | Object | - |
+| value | Form data | Object | - |
+| remote | remote function configure in form generator | Object | {} |
+
+#### Events
+
+| <div style="width: 150px;">name </div> | <div style="width: 290px;">description</div> | <div style="width: 200px;">callback</div> |
+| --- | --- | --- |
+| on-change | called when form data changed | field: field id of the changed dada<br>value: the new value <br>data: form data |
+
+#### Methods
+
+You can get an instance of GenerateForm with `ref` , and invoke the instance method
+
+| name | description | parameter |
+| --- | --- | --- |
+| getData | get the form data | - |
+| reset | reset the format data | - |
+
+### Example
+
+#### Generate Form
+
+``` html
+<fm-generate-form 
+  :data="jsonData" 
+  ref="generateForm"
+>
+</fm-generate-form>
+```
+
+``` javascript
+export default {
+  data () {
+    return {
+      jsonData: {
+        "list": [/* ... */],
+        "config": {
+          "labelWidth": 100,
+          "labelPosition": "right",
+          "size": "small",
+          "customClass": ""
+        }
+      }
+    }
+  }
+}
+```
+
+`jsonData` You can get this data by click the 'Generate JSON' button in the form generator page.
+
+#### Get the form data dynamically
+
+When you need to get the form data  dynamically (such as a input component need to be edited), you need bind  the `value` parameter.
+```html
+<fm-generate-form 
+  :data="jsonData"
+  :value="formData"
+  ref="generateForm"
+>
+</fm-generate-form>
+```
+```javascript
+export default {
+  data () {
+    return {
+      formData: {
+        name: 'Gavin'
+      }
+    }
+  }
+}
+```
+
+#### Validate and get the form data
+
+After you call  `getData` method, it will validate the data format, and then if the validation is pass it will return a JSON data contains all the available form data.
+
+``` html
+<fm-generate-form
+  :data="jsonData"
+  ref="generateForm">
+</fm-generate-form>
+```
+
+``` javascript
+this.$refs.generateForm.getData().then(data => {
+  // Get data success
+}).catch(e => {
+  // Get data faild
+})
+```

docs/develop.md

@@ -0,0 +1,110 @@
+# Secondary Development
+
+[![xscode](http://cdn.form.xiaoyaoji.cn/vue-form-making-banner.png)](https://xscode.com/gavinzhulei/vue-form-making)
+
+> The secondary need development need fundamental comment of vue, regards vue you can refer to [https://cn.vuejs.org/v2/guide/](https://cn.vuejs.org/v2/guide/).
+
+## Get Source Code
+
+```bash
+git clone https://github.com/GavinZhuLei/vue-form-making.git
+``` 
+
+## Install Dependencies
+
+```bash
+npm install
+```
+
+## Run
+
+```bash
+npm run serve
+```
+
+## Build
+
+You can rebuild the code if you have any change, and then put the package into dist directroy, the build command is as below:
+
+```bash
+npm run build-bundle
+```
+
+---
+
+## Extend Form Attributes
+
+You can extend the attributes of the component as you need,we will show you how to do this:
+
+### 1. Add Form Attributes
+
+src/components/Container.vue
+```javascript
+<script>
+  export default {
+    // ...
+   	data () {
+      return {
+        widgetForm: {
+          list: [],
+          config: {
+            labelWidth: 100,
+            labelPosition: 'top',
+            size: 'small'
+            // put you own attributes here
+          },
+        },
+      }
+    }
+  }
+</script>
+```
+
+### 2. Modify MakeForm
+
+open `src/components/FormConfig.vue`, modify the file to support your new attributes. the `props.data` is the config data widgetForm.config.
+
+### 3. Modify GenerateForm
+
+open  `src/components/GenerateForm.vue` , modify the file to add your new attributes.
+
+## Extend Component
+
+### 1. Add custom component information
+
+Modify src/components/componentsConfig.js to add you custom component information,currently we have 3 objects to save the component information , they are basicComponents advanceComponents layoutComponents, which we call them [Basic Component], [Advanced Component], [Layout] in MakeForm:
+
+``` javascript
+{
+  type: 'input', //component type
+  name: 'text', //The name of component,which will display in MakeFrom
+  icon: 'icon-input', //The icon of the component, you can customized the icon
+  options: { // The configuration of component
+    defaultValue: '', // Defalue value of the component
+  }
+}
+```
+
+### 2. Import the Component
+
+Import you component in src/components/WidgetFormItem.vue 、 src/components/GenerateFormItem.vue as below:
+
+``` javascript
+import CustomComponent from 'your component location'
+  
+export default {
+  components: {
+    CustomComponent
+  }
+}
+```
+
+### 3. Modify WidgetConfig.vue
+
+Modify src/components/WidgetConfig.vue according to your requirement, now you can use you own component in the FromMaking.
+
+## Customized Icon
+
+For default,we used Alibaba font icon library [iconfont](https://www.iconfont.cn/) , if you want to customized the icon, you can copy you own icon file into the project to replace the default icon, if default icon is in src/iconfont.
+
+![image.png](http://docs.form.making.link/images/other/develop-1.en.png)

docs/develop.zh-CN.md

@@ -0,0 +1,118 @@
+# 二次开发
+
+二次开发用于商业用途需要购买商业授权，具体详情请查看 [商业授权说明](http://form.making.link/pricing)
+
+> 二次开发需要 vue 的基础，如果还不了解 vue 请查看 [https://cn.vuejs.org/v2/guide/](https://cn.vuejs.org/v2/guide/)
+
+## 获取代码
+
+```bash
+git clone https://github.com/GavinZhuLei/vue-form-making.git
+``` 
+
+## 安装项目依赖包
+
+```bash
+npm install
+```
+
+如果安装失败，需要使用淘宝镜像地址，设置方法如下：
+
+``` bash
+npm config set registry https://registry.npm.taobao.org
+```
+
+## 运行项目
+
+```bash
+npm run serve
+```
+
+运行启动的项目是引用设计器的官方网站代码，设计器源码在 `src/components` 下面
+
+## 打包设计器
+
+修改代码后，可以通过以下代码重新对设计器进行打包，打包过后放在 dist/ 目录下面，可在代码中直接引用
+
+```bash
+npm run build-bundle
+```
+
+---
+
+## 扩展表单属性
+
+下面将介绍如何在设计器的基础上二次开发扩展自定义组件
+
+### 1. 添加配置参数
+
+src/components/Container.vue
+```javascript
+<script>
+  export default {
+    // ...
+   	data () {
+      return {
+        widgetForm: {
+          list: [],
+          config: {
+            labelWidth: 100,
+            labelPosition: 'top',
+            size: 'small'
+            // 在此处扩展表单的配置信息
+          },
+        },
+      }
+    }
+  }
+</script>
+```
+
+### 2. 扩展设计器配置
+
+`src/components/FormConfig.vue` 下添加对表单的配置，其中 props.data 是上面配置信息的 widgetForm.config
+
+### 3. 添加渲染信息
+
+配置完成后，最后就是渲染，在 `src/components/GenerateForm.vue` 下添加自己增加的配置即完成了对表单属性的扩展
+
+## 扩展组件
+
+### 1. 添加自定义组件信息
+
+src/components/componentsConfig.js 下添加配置信息，目前包括 basicComponents advanceComponents layoutComponents 三个对象，分别对应设计器中基础字段、高级字段、布局字段，将配置信息添加到对应的字段下面:
+
+``` javascript
+{
+  type: 'input', // 组件类型，保持唯一
+  name: '单行文本', //组件展示名称
+  icon: 'icon-input', //组件展示icon, 如果需要自定义，请参考 如何自定义图标
+  options: { // 组件配置信息，根据自定义组件自己添加配置
+    defaultValue: '', // 该值表示组件的默认值
+  }
+}
+```
+
+### 2. 引用组件
+
+src/components/WidgetFormItem.vue 、 src/components/GenerateFormItem.vue 下分别引入自定义的组件:
+
+``` javascript
+import CustomComponent from '你的组件地址'
+  
+export default {
+  components: {
+    CustomComponent
+  }
+}
+```
+
+### 3. 添加组件配置信息
+
+src/components/WidgetConfig.vue 下根据自己要求添加配置信息, props.data 结构为上面的配置信息，至此，自定义扩展的组件就成功的引入到设计器中。
+
+## 自定义图标
+
+项目使用的是阿里字体图标库 [iconfont](https://www.iconfont.cn/) , 如果需要自定义图标配置，请将图标加入到自己的项目中，然后选择Font class，将代码下载到本地替换 src/iconfont 文件夹下的文件
+
+![image.png](http://docs.form.making.link/images/other/develop-1.en.png)

docs/guide.md

@@ -0,0 +1,233 @@
+# Development
+
+## Installation
+
+### npm
+
+It is recommended to use npm for installation, which Works better with  [webpack](https://webpack.js.org/)  packaging tools.
+
+```bash
+npm install form-making -S
+```
+
+### CDN
+
+Currently, you can get the latest resource from [unpkg.com/form-making](https://unpkg.com/form-making/), just need reference the Js and Css file as below:
+
+```html
+<!--  import style -->
+<link rel="stylesheet" href="https://unpkg.com/form-making/dist/FormMaking.css">
+<!--  import Javascript  -->
+<script src="https://unpkg.com/form-making/dist/FormMaking.umd.js"></script>
+
+<!-- import ace.js for preview function in form generator  -->
+<script src="https://unpkg.com/form-making/public/lib/ace/ace.js"></script>
+``` 
+
+> It it recommended to lock version if you get the FormMaking via CDN, to prevent you current FormMaking  from being affected by incompatible updates.How to lock version please refer to [unpkg.com](https://unpkg.com/).
+
+### Hello world
+
+With the CDN approach we can easily use FormMaking to load form design pages.
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <!-- import style -->
+  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
+  <link rel="stylesheet" href="https://unpkg.com/form-making/dist/FormMaking.css">
+</head>
+<body>
+  <div id="app">
+    <!-- Set the height of the design area -->
+    <fm-making-form style="height: 500px;" preview generate-code generate-json>
+    </fm-making-form>
+  </div>
+</body>
+  <!-- import Vue before Element -->
+  <script src="https://unpkg.com/vue/dist/vue.js"></script>
+  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
+  <!-- import JavaScript -->
+  <script src="https://unpkg.com/form-making/dist/FormMaking.umd.js"></script>
+  <!-- import ace.js for preview function in form generator -->
+  <script src="https://unpkg.com/form-making/public/lib/ace/ace.js"></script>
+  
+  <script>
+    new Vue({
+      el: '#app'
+    })
+  </script>
+</html>
+```
+
+## Quick start
+
+### Import Element
+
+The component library of element-ui is used in the project, and the 'Element' package needs to be imported when using it. Please refer to the element document for the specific introduction method [Quick Start](https://element.eleme.io/#/zh-CN/component/quickstart)
+
+### Import FormMaking
+
+#### Fully import
+
+```javascript
+import FormMaking from 'form-making'
+import 'form-making/dist/FormMaking.css'
+
+Vue.use(FormMaking)
+```
+
+Note:the style file needs to be imported separately.
+
+#### Partly Import
+
+```javascript
+import {
+  GenerateForm,
+  MakingForm
+} from 'form-making'
+import 'form-making/dist/FormMaking.css'
+
+Vue.component(GenerateForm.name, GenerateForm)
+Vue.component(MakingForm.name, MakingForm)
+/* or
+ * Vue.use(GenerateForm)
+ * Vue.use(MakingForm)
+ */
+```
+
+#### Import ace.js
+
+By default, ace.js is not imported. You need import it by yourself.
+
+```html
+<!-- ace.js is used for preview function -->
+<script src="https://unpkg.com/form-making/public/lib/ace/ace.js"></script>
+```
+
+### Start to Use
+
+#### MakingForm
+
+``` html
+<template>
+  <fm-making-form 
+    ref="makingform" 
+    style="height: 500px;" 
+    preview 
+    generate-code 
+    generate-json
+  >
+    <template slot="action">
+    </template>
+  </fm-making-form>
+</template>
+```
+
+*You need set the height of the form generator,he default height is 100% based on the parent element.*
+
+For detailed usage of components, please refer to [Components](/docs/component.zh-CN.md)
+
+## Internationalization
+
+Use `vue-i18n@5.x` for multi-language support.
+
+### Language configuration
+
+Supports Simplified Chinese (zh-CN) and English (en-US),the default language is Simplified Chinese (zh-CN)，if you want to use English (en-US), configure the parameter as below:
+
+```js
+Vue.use(FormMaking, {lang: 'en-US'})
+```
+
+If CDN is used for introduction, the configuration is as follows：
+
+```html
+<script>
+  Vue.config.lang = 'zh-CN'
+  new Vue({
+    el: '#app'
+  })
+</script>
+```
+
+### Used in multilingual projects
+
+#### compatibility with `vue-i18n@5.x`
+
+```js
+import Vue from 'vue'
+import Element from 'element-ui'
+import FormMaking from 'form-making'
+import VueI18n from 'vue-i18n'
+import enLocale from 'element-ui/lib/locale/lang/en'
+import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+
+Vue.use(VueI18n)
+Vue.locale('zh-CN', {...zhLocale, message: 'hello'})
+Vue.locale('en-US', {...enLocale, message: '你好'})
+Vue.config.lang = 'zh-CN'
+
+Vue.use(Element)
+
+Vue.use(FormMaking, {lang: 'zh-CN', locale: Vue.locale})
+
+new Vue({
+  render: h => h(App)
+}).$mount('#app')
+```
+
+#### compatibility with `vue-i18n@6.x` version or higher
+
+```js
+import Vue from 'vue'
+import Element from 'element-ui'
+import FormMaking from 'form-making'
+import VueI18n from 'vue-i18n'
+import enLocale from 'element-ui/lib/locale/lang/en'
+import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+
+Vue.use(VueI18n)
+
+const messages = {
+  'en-US': {
+    message: 'hello',
+    ...enLocale
+  },
+  'zh-CN': {
+    message: '你好',
+    ...zhLocale
+  }
+}
+
+// Create VueI18n instance with options
+const i18n = new VueI18n({
+  locale: 'zh-CN', // set locale
+  messages, // set locale messages
+})
+
+Vue.use(Element, {
+  i18n: (key, value) => i18n.t(key, value)
+})
+
+Vue.use(FormMaking, {lang: 'zh-CN', i18n})
+
+new Vue({
+  i18n,
+  render: h => h(App)
+}).$mount('#app')
+```
+
+## Plug-in
+
+### Rich text editor
+
+If you need to use a rich text editor, you need to import `vue2-editor`
+
+```js
+import VueEditor from "vue2-editor"
+
+Vue.use(VueEditor)
+```

docs/guide.zh-CN.md

@@ -0,0 +1,229 @@
+# 开发指南
+
+## 安装
+
+### npm 安装
+
+推荐使用 npm 的方式安装，它能更好地和 [webpack](https://webpack.js.org/) 打包工具配合使用。
+
+```bash
+npm install form-making -S
+```
+
+### CDN
+
+目前可以通过 [unpkg.com/form-making](https://unpkg.com/form-making/)获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。
+
+```html
+<!-- 引入样式 -->
+<link rel="stylesheet" href="https://unpkg.com/form-making/dist/FormMaking.css">
+<!-- 引入组件库 -->
+<script src="https://unpkg.com/form-making/dist/FormMaking.umd.js"></script>
+
+<!-- 需要在设计器中预览代码需要引入ace.js库 -->
+<script src="https://unpkg.com/form-making/public/lib/ace/ace.js"></script>
+``` 
+
+> 建议使用 CDN 引入 FormMaking 的用户在链接地址上锁定版本，以免将来 FormMaking 升级时受到非兼容性更新的影响。锁定版本的方法请查看 [unpkg.com](https://unpkg.com/)。
+
+### Hello world
+
+通过 CDN 的方式我们可以很容易地使用 FormMaking 来加载表单设计页面。
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <!-- 引入样式 -->
+  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
+  <link rel="stylesheet" href="https://unpkg.com/form-making/dist/FormMaking.css">
+</head>
+<body>
+  <div id="app">
+    <!-- 需要设置编辑区域高度 -->
+    <fm-making-form style="height: 500px;" preview generate-code generate-json>
+    </fm-making-form>
+  </div>
+</body>
+  <!-- 引入组件库 -->
+  <script src="https://unpkg.com/vue/dist/vue.js"></script>
+  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
+  <script src="https://unpkg.com/form-making/dist/FormMaking.umd.js"></script>
+  <!-- 需要在设计器中预览代码需要引入ace.js库 -->
+  <script src="https://unpkg.com/form-making/public/lib/ace/ace.js"></script>
+  
+  <script>
+    new Vue({
+      el: '#app'
+    })
+  </script>
+</html>
+```
+
+## 快速上手
+
+### 引入 Element
+
+项目中使用的是 element-ui 的组件库，在使用的时候需要引入 Element 包，具体引入方法请参考 Element 文档 [快速上手](https://element.eleme.io/#/zh-CN/component/quickstart)
+
+### 引入 FormMaking
+
+#### 完整引入
+
+```javascript
+import FormMaking from 'form-making'
+import 'form-making/dist/FormMaking.css'
+
+Vue.use(FormMaking)
+```
+
+以上代码便完成了 FormMaking 的引入。需要注意的是，样式文件需要单独引入。
+
+#### 引入部分组件
+
+```javascript
+import {
+  GenerateForm,
+  MakingForm
+} from 'form-making'
+import 'form-making/dist/FormMaking.css'
+
+Vue.component(GenerateForm.name, GenerateForm)
+Vue.component(MakingForm.name, MakingForm)
+/* 或写为
+ * Vue.use(GenerateForm)
+ * Vue.use(MakingForm)
+ */
+```
+
+#### 引入 ace.js
+默认情况下没有引入ace.js，如果需要使用ace.js，需要自己引入
+```html
+<!-- 需要在设计器中预览代码需要引入ace.js库 -->
+<script src="https://unpkg.com/form-making/public/lib/ace/ace.js"></script>
+```
+
+### 开始使用
+
+#### 表单设计器（MakingForm）
+
+``` html
+<template>
+  <fm-making-form 
+    ref="makingform" 
+    style="height: 500px;" 
+    preview 
+    generate-code 
+    generate-json
+  >
+    <template slot="action">
+    </template>
+  </fm-making-form>
+</template>
+```
+*使用时需要设置设计器的高度，默认情况高度是根据父元素 100% 来渲染*
+
+组件的详细使用方法请参阅 [组件](/docs/component.zh-CN.md)
+
+## 国际化
+
+组件使用 `vue-i18n@5.x` 进行多语言支持
+
+### 语言配置
+
+组件支持中文简体(zh-CN)和英文(en-US)两种语言，默认使用中文简体，若希望使用英文，则需要进行如下配置：
+
+```js
+Vue.use(FormMaking, {lang: 'en-US'})
+```
+
+如果使用的是CDN方式引入，配置如下：
+
+```html
+<script>
+  Vue.config.lang = 'zh-CN'
+  new Vue({
+    el: '#app'
+  })
+</script>
+```
+
+### 在多语言项目中使用
+
+#### 兼容 `vue-i18n@5.x`
+
+```js
+import Vue from 'vue'
+import Element from 'element-ui'
+import FormMaking from 'form-making'
+import VueI18n from 'vue-i18n'
+import enLocale from 'element-ui/lib/locale/lang/en'
+import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+
+Vue.use(VueI18n)
+Vue.locale('zh-CN', {...zhLocale, message: 'hello'})
+Vue.locale('en-US', {...enLocale, message: '你好'})
+Vue.config.lang = 'zh-CN'
+
+Vue.use(Element)
+
+Vue.use(FormMaking, {lang: 'zh-CN', locale: Vue.locale})
+
+new Vue({
+  render: h => h(App)
+}).$mount('#app')
+```
+
+#### 兼容 `vue-i18n@6.x` 以上版本
+
+```js
+import Vue from 'vue'
+import Element from 'element-ui'
+import FormMaking from 'form-making'
+import VueI18n from 'vue-i18n'
+import enLocale from 'element-ui/lib/locale/lang/en'
+import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+
+Vue.use(VueI18n)
+
+const messages = {
+  'en-US': {
+    message: 'hello',
+    ...enLocale
+  },
+  'zh-CN': {
+    message: '你好',
+    ...zhLocale
+  }
+}
+
+// Create VueI18n instance with options
+const i18n = new VueI18n({
+  locale: 'zh-CN', // set locale
+  messages, // set locale messages
+})
+
+Vue.use(Element, {
+  i18n: (key, value) => i18n.t(key, value)
+})
+
+Vue.use(FormMaking, {lang: 'zh-CN', i18n})
+
+new Vue({
+  i18n,
+  render: h => h(App)
+}).$mount('#app')
+```
+
+## 插件
+
+### 富文本编辑器
+
+如果需要使用富文本编辑器，需要单独引入 `vue2-editor`
+
+```js
+import VueEditor from "vue2-editor"
+
+Vue.use(VueEditor)
+```

package.json

@@ -0,0 +1,87 @@
+{
+  "name": "form-making",
+  "description": "A designer and generator of form base on Vue.js, make form development simple and efficient.",
+  "version": "1.2.10",
+  "author": "GavinZhulei",
+  "license": "LGPL",
+  "keywords": [
+    "component",
+    "vue",
+    "form",
+    "element-ui",
+    "auto"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/GavinZhuLei/vue-form-making"
+  },
+  "main": "dist/FormMaking.common.js",
+  "scripts": {
+    "serve": "vue-cli-service serve --open",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "build-bundle": "vue-cli-service build --target lib --name FormMaking ./src/index.js"
+  },
+  "dependencies": {
+    "axios": "^0.18.0",
+    "clipboard": "^2.0.1",
+    "element-ui": "^2.13.0",
+    "normalize.css": "^8.0.0",
+    "qiniu": "^7.2.1",
+    "qiniu-js": "^2.5.1",
+    "viewerjs": "^1.2.0",
+    "vue": "^2.6.5",
+    "vue-i18n": "5.0.3",
+    "vue-router": "^3.0.1",
+    "vue2-editor": "^2.10.2",
+    "vuedraggable": "^2.16.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.1",
+    "@types/ace": "0.0.42",
+    "@vue/cli-plugin-babel": "^3.0.0",
+    "@vue/cli-plugin-eslint": "^3.0.0",
+    "@vue/cli-service": "^3.0.0",
+    "babel-core": "^6.26.3",
+    "core-js": "^2.6.5",
+    "rollup": "^0.57.1",
+    "rollup-plugin-babel": "^3.0.7",
+    "rollup-plugin-buble": "^0.19.2",
+    "rollup-plugin-uglify-es": "0.0.1",
+    "rollup-plugin-vue": "^3.0.0",
+    "terser-webpack-plugin": "^1.2.4",
+    "vue-template-compiler": "^2.6.5",
+    "node-sass": "^4.12.0",
+    "sass-loader": "^8.0.2"
+  },
+  "babel": {
+    "presets": [
+      "@vue/app",
+      [
+        "@babel/preset-env",
+        {
+          "useBuiltIns": "entry"
+        }
+      ]
+    ]
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "plugin:vue/essential"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

public/index.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">
+    <title>FormMaking</title>
+    <meta name="description" content="A designer and generator of form base on Vue.js, make form development simple and efficient.">
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+  
+      gtag('config', 'UA-145160307-3');
+    </script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+    <script>
+      var _hmt = _hmt || [];
+      (function() {
+        var hm = document.createElement("script");
+        hm.src = "https://hm.baidu.com/hm.js?8cde406621c307ce36787b94c2dac09b";
+        var s = document.getElementsByTagName("script")[0]; 
+        s.parentNode.insertBefore(hm, s);
+      })();
+    </script>
+    <script src="lib/ace/ace.js"></script>
+  </body>
+</html>

public/lib/ace/ext-error_marker.js

@@ -0,0 +1,9 @@
+;
+                (function() {
+                    window.require(["ace/ext/error_marker"], function(m) {
+                        if (typeof module == "object" && typeof exports == "object" && module) {
+                            module.exports = m;
+                        }
+                    });
+                })();
+