文档更新

Author: GavinZhuLei

README.md

@@ -27,11 +27,13 @@
 ```
 
 ## Install
+
 ```shell
 npm install form-making -S
 ```
 
 ## Quick Start
+
 ``` javascript
 import FormMaking from 'form-making'
 import 'form-making/dist/FormMaking.css'
@@ -51,21 +53,57 @@ Vue.component(GenerateForm.name, GenerateForm)
 <fm-generate-form></fm-generate-form>
 ```
 
-## 功能介绍
+## 设计器引用
+
+``` javascript
+import {MakingForm} from 'form-making'
+Vue.component(MakingForm.name, MakingForm)
+```
+
+```html
+<fm-making-form  preview generate-code generate-json>
+    <template slot="action">
+    </template>
+  </fm-making-form>
+```
+
+##### props
+| Prop name  | Description  | Type  | Default value |
+| ------------ | ------------ | ------------ | ------------ |
+| preview  | 预览，头部操作按钮  | Boolean  | false |
+| generate-json  | 生成JSON  | Boolean  | false |
+| generate-code  | 生成代码  | Boolean  | false |
+
 
-通过 [在线地址](http://tools.xiaoyaoji.cn/form) 或者拉取代码自己打包到项目生成的JSON，用于表单渲染
+##### methods
+| Function name | Description                    |
+| ------------- | ------------------------------ |
+| `getJSON`      | 获取设计器生成的JSON数据       |
+| `getHtml`   | 获取生成可使用的html代码    |
+| `setJSON(value)`   | 根据value值设置表单设计器    |
+
+##### slots
+| Slot name | Description                    |
+| ------------- | ------------------------------ |
+|   action    | 自定义设计器操作按钮，展示在设计头部区域       |
+
+
+## 表单渲染
+
+通过 [在线地址](http://tools.xiaoyaoji.cn/form) 或者引用设计器生成的JSON，用于表单渲染
 ![](https://user-gold-cdn.xitu.io/2018/9/27/1661a50b64f77e5f?w=1580&h=1080&f=png&s=162948)
 
 下面就是加载对应的数据用于展示，假设你已经正确加载组件
 
 ``` html
-<fm-generate-form 
-    :data="jsonData" 
-    :remote="remoteFuncs" 
+<fm-generate-form
+    :data="jsonData"
+    :remote="remoteFuncs"
     :value="values"
     ref="generateForm">
 </fm-generate-form>
 ```
+
 ``` javascript
 new Vue({
     ...
@@ -107,6 +145,11 @@ new Vue({
     }
 })
 ```
+
+## 高级字段使用
+
+
+
 ## 问题交流
 
 QQ群：902048874

doc/blank.md

@@ -0,0 +1,22 @@
+## 自定义扩展字段
+
+**开发者使用该字段可以通过代码引用的方式添加自己想要的组件**
+
+1. 首先在设计器中配置需要绑定的数据key和数据类型，这里需要设置下你绑定的到表单中的数据类型，防止类型报错
+
+   ![](https://user-gold-cdn.xitu.io/2018/10/27/166b55ab4883ecbe?w=1127&h=341&f=png&s=27636)
+
+2. 在 fm-generate-form 中引入自定义组件，如：
+
+ ```html
+  <generate-form >
+        <template slot="blank" slot-scope="scope">
+          宽度：<el-input v-model="scope.model.blank.width" style="width: 100px"></el-input>
+          高度：<el-input v-model="scope.model.blank.height" style="width: 100px"></el-input>
+        </template>
+      </generate-form>
+```
+
+3.  预览效果如下：
+
+  ![](https://user-gold-cdn.xitu.io/2018/10/27/166b5a15b837f3fe?w=867&h=320&f=png&s=18568)

doc/imgupload.md

@@ -0,0 +1,25 @@
+## 图片上传
+
+**图片上传到七牛，需要配置七牛访问图片域名和七牛上传token**
+
+![](https://user-gold-cdn.xitu.io/2018/10/27/166b5aa13b248ca0?w=318&h=178&f=png&s=11373)
+
+代码实例：
+```html
+<fm-generate-form :remote="remoteFuncs" ></fm-generate-form>
+```
+
+```javascript
+new Vue({
+	data () {
+	 	return {
+			remoteFuncs: {
+				funcGetToken (resolve) {
+					// todo: 获取七牛token
+					resolve(uptoken)
+				}
+			  }
+		}
+	}
+})
+```

package.json

@@ -1,7 +1,7 @@
 {
   "name": "form-making",
   "description": "基于Vue,ElementUI开发的一款表单设计器，提高表单开发效率的利器，让开发者从枯燥的表单代码编写中解放出来",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "author": "GavinZhulei",
   "license": "MIT",
   "keywords": [
@@ -31,6 +31,10 @@
     "multiparty": "^4.2.1",
     "normalize.css": "^8.0.0",
     "qiniu": "^7.2.1",
+    "qiniu-js": "^2.5.1",
+    "tinymce": "^4.8.4",
+    "tui-color-picker": "^2.2.0",
+    "tui-editor": "^1.2.6",
     "viewerjs": "^1.2.0",
     "vue": "^2.5.16",
     "vue-awesome": "^3.0.0",