diff --git a/src/common/model/global/i18n/LangEn.ts b/src/common/model/global/i18n/LangEn.ts
index 48d8f9d..68768df 100644
--- a/src/common/model/global/i18n/LangEn.ts
+++ b/src/common/model/global/i18n/LangEn.ts
@@ -165,7 +165,7 @@ let LangEn = {
     systemCleanup: "System Cleanup",
     systemCleanupDescription: "This operation will cleanup everything except administrators' data",
     systemCleanupPrompt: "This operation will cleanup everything except administrators' account data, please input login password.",
-    officeUrl: "Office Preview Url",
+    previewConfig: "File Preview Config",
     editPreference: "Edit Preference",
     enterWebsiteName: "Please enter website name!",
     enterZipMaxNumLimit: "Please enter zip max num!",
diff --git a/src/common/model/global/i18n/LangZh.ts b/src/common/model/global/i18n/LangZh.ts
index c1966af..e96005c 100644
--- a/src/common/model/global/i18n/LangZh.ts
+++ b/src/common/model/global/i18n/LangZh.ts
@@ -167,7 +167,7 @@ let LangZh = {
     systemCleanup: "重置系统",
     systemCleanupDescription: "重置系统将清空除管理员账号外所有数据",
     systemCleanupPrompt: "重置系统将清空除管理员账号外所有数据，事关重大，请输入登录密码",
-    officeUrl: "Office预览链接",
+    previewConfig: "文件预览配置",
     editPreference: "设置网站偏好",
     enterWebsiteName: "请输入网站名称!",
     enterZipMaxNumLimit: "zip最大数量限制必填!",
diff --git a/src/common/model/preference/Preference.ts b/src/common/model/preference/Preference.ts
index 9cc4fcd..8b455e8 100644
--- a/src/common/model/preference/Preference.ts
+++ b/src/common/model/preference/Preference.ts
@@ -1,5 +1,7 @@
 import SafeUtil from '../../util/SafeUtil';
 import BaseEntity from '../base/BaseEntity';
+import PreviewConfig from "./model/PreviewConfig";
+import JsonUtil from "../../util/JsonUtil";
 
 
 export default class Preference extends BaseEntity {
@@ -27,8 +29,8 @@ export default class Preference extends BaseEntity {
   defaultTotalSizeLimit: number = -1
   //是否允许自主注册
   allowRegister: boolean = false
-  //Office预览链接
-  officeUrl: string | null = null
+  //预览配置
+  previewConfig: PreviewConfig = new PreviewConfig()
   //后台版本
   version: string | null = null
 
@@ -47,6 +49,8 @@ export default class Preference extends BaseEntity {
   assign(obj: any) {
     super.assign(obj);
 
+    this.assignEntity("previewConfig", PreviewConfig)
+
   }
 
   getForm(): any {
@@ -60,7 +64,7 @@ export default class Preference extends BaseEntity {
       downloadDirMaxSize: this.downloadDirMaxSize,
       defaultTotalSizeLimit: this.defaultTotalSizeLimit,
       allowRegister: this.allowRegister,
-      officeUrl: this.officeUrl
+      previewConfig: JsonUtil.toJson(this.previewConfig.getForm())
     };
   }
 
diff --git a/src/common/model/preference/model/PreviewConfig.ts b/src/common/model/preference/model/PreviewConfig.ts
new file mode 100644
index 0000000..db3b80a
--- /dev/null
+++ b/src/common/model/preference/model/PreviewConfig.ts
@@ -0,0 +1,47 @@
+/**
+ * 预览配置
+ * 支持自定义不同的文件预览类型
+ */
+import Base from "../../base/Base";
+import PreviewEngine from "./PreviewEngine";
+
+/**
+ * 预览配置
+ */
+export default class PreviewConfig extends Base {
+
+  /**
+   * 预览引擎
+   */
+  previewEngines: PreviewEngine[] = []
+
+  constructor() {
+
+    super()
+
+  }
+
+  assign(obj: any) {
+    super.assign(obj);
+
+    this.assignList("previewEngines", PreviewEngine)
+  }
+
+
+  getForm(): any {
+
+    let forms = this.previewEngines.map((item: PreviewEngine, index: number) => {
+      return item.getForm()
+    })
+
+    return {
+      previewEngines: forms
+    };
+  }
+
+
+}
+
+
+
+
diff --git a/src/common/model/preference/model/PreviewEngine.ts b/src/common/model/preference/model/PreviewEngine.ts
new file mode 100644
index 0000000..d3403c0
--- /dev/null
+++ b/src/common/model/preference/model/PreviewEngine.ts
@@ -0,0 +1,37 @@
+/**
+ * 预览配置
+ * 支持自定义不同的文件预览类型
+ */
+import Base from "../../base/Base";
+
+
+export default class PreviewEngine extends Base {
+
+  /**
+   * 此预览引擎的url
+   */
+  url: string = ""
+
+  /**
+   * 此预览引擎支持的文件后缀名。
+   * 逗号分隔，不带.  例如： xls,doc,ppt,xlsx,docx,pptx
+   */
+  extensions: string = ""
+
+
+  constructor() {
+    super()
+  }
+
+  getForm(): any {
+    return {
+      url: this.url,
+      extensions: this.extensions,
+    };
+  }
+
+}
+
+
+
+
diff --git a/src/pages/preference/Edit.tsx b/src/pages/preference/Edit.tsx
index 1499fe5..fe3141a 100644
--- a/src/pages/preference/Edit.tsx
+++ b/src/pages/preference/Edit.tsx
@@ -1,24 +1,27 @@
 import React from "react";
-import { RouteComponentProps } from "react-router-dom";
+import {RouteComponentProps} from "react-router-dom";
 import "./Edit.less";
 import TankComponent from "../../common/component/TankComponent";
 import User from "../../common/model/user/User";
 import Moon from "../../common/model/global/Moon";
 import TankTitle from "../widget/TankTitle";
-import { Button, Form, Input, InputNumber, Switch } from "antd";
-import { SaveOutlined } from "@ant-design/icons";
+import {Button, Form, Input, InputNumber, Switch} from "antd";
+import {SaveOutlined} from "@ant-design/icons";
 import TankContentCard from "../widget/TankContentCard";
 import Preference from "../../common/model/preference/Preference";
 import FileUtil from "../../common/util/FileUtil";
-import { FormInstance } from "antd/lib/form";
+import {FormInstance} from "antd/lib/form";
 import MessageBoxUtil from "../../common/util/MessageBoxUtil";
 import Sun from "../../common/model/global/Sun";
 import Lang from "../../common/model/global/Lang";
 import MatterImage from "../matter/widget/MatterImage";
+import PreviewConfigPanel from "./widget/PreviewConfigPanel";
 
-interface IProps extends RouteComponentProps {}
+interface IProps extends RouteComponentProps {
+}
 
-interface IState {}
+interface IState {
+}
 
 export default class Edit extends TankComponent<IProps, IState> {
   formRef = React.createRef<FormInstance>();
@@ -77,15 +80,15 @@ export default class Edit extends TankComponent<IProps, IState> {
     let preference = that.preference;
 
     const layout = {
-      labelCol: { span: 6 },
-      wrapperCol: { span: 18 },
+      labelCol: {span: 6},
+      wrapperCol: {span: 18},
     };
 
     let initialValues: any = preference.getForm();
 
     return (
       <div className="page-preference-edit">
-        <TankTitle name={Lang.t("preference.editPreference")}></TankTitle>
+        <TankTitle name={Lang.t("preference.editPreference")}/>
 
         <TankContentCard loading={preference.detailLoading}>
           <Form
@@ -107,11 +110,11 @@ export default class Edit extends TankComponent<IProps, IState> {
                 },
               ]}
             >
-              <Input />
+              <Input/>
             </Form.Item>
 
             <Form.Item label="logo" name="logoUrl">
-              <MatterImage uploadHint={Lang.t("preference.logoSquare")} />
+              <MatterImage uploadHint={Lang.t("preference.logoSquare")}/>
             </Form.Item>
 
             <Form.Item label="favicon" name="faviconUrl">
@@ -123,15 +126,11 @@ export default class Edit extends TankComponent<IProps, IState> {
             </Form.Item>
 
             <Form.Item label={Lang.t("preference.copyright")} name="copyright">
-              <Input />
+              <Input/>
             </Form.Item>
 
             <Form.Item label={Lang.t("preference.extraInfo")} name="record">
-              <Input />
-            </Form.Item>
-
-            <Form.Item label={Lang.t("preference.officeUrl")} name="officeUrl">
-              <Input />
+              <Input/>
             </Form.Item>
 
             <Form.Item
@@ -144,7 +143,7 @@ export default class Edit extends TankComponent<IProps, IState> {
                 },
               ]}
             >
-              <InputNumber min={-1} max={1000} className="w150" />
+              <InputNumber min={-1} max={1000} className="w150"/>
             </Form.Item>
 
             <Form.Item
@@ -161,15 +160,15 @@ export default class Edit extends TankComponent<IProps, IState> {
                 ]}
                 noStyle
               >
-                <InputNumber min={-1} className="w150" />
+                <InputNumber min={-1} className="w150"/>
               </Form.Item>
               <span className="pl10">
                 {" "}
                 {Lang.t("preference.current")}:
                 {this.formRef && this.formRef.current
                   ? FileUtil.humanFileSize(
-                      this.formRef.current.getFieldValue("downloadDirMaxSize")
-                    )
+                    this.formRef.current.getFieldValue("downloadDirMaxSize")
+                  )
                   : FileUtil.humanFileSize(preference.defaultTotalSizeLimit)}
               </span>
             </Form.Item>
@@ -188,17 +187,17 @@ export default class Edit extends TankComponent<IProps, IState> {
                 ]}
                 noStyle
               >
-                <InputNumber min={-1} className="w150" />
+                <InputNumber min={-1} className="w150"/>
               </Form.Item>
               <span className="pl10">
                 {" "}
                 {Lang.t("preference.current")}:
                 {this.formRef && this.formRef.current
                   ? FileUtil.humanFileSize(
-                      this.formRef.current.getFieldValue(
-                        "defaultTotalSizeLimit"
-                      )
+                    this.formRef.current.getFieldValue(
+                      "defaultTotalSizeLimit"
                     )
+                  )
                   : FileUtil.humanFileSize(preference.defaultTotalSizeLimit)}
               </span>
             </Form.Item>
@@ -209,11 +208,17 @@ export default class Edit extends TankComponent<IProps, IState> {
               required={true}
               valuePropName="checked"
             >
-              <Switch />
+              <Switch/>
+            </Form.Item>
+
+            <Form.Item label={Lang.t("preference.previewConfig")}>
+
+              <PreviewConfigPanel previewConfig={preference.previewConfig}/>
+
             </Form.Item>
 
             <div className="text-right">
-              <Button type="primary" htmlType="submit" icon={<SaveOutlined />}>
+              <Button type="primary" htmlType="submit" icon={<SaveOutlined/>}>
                 {Lang.t("save")}
               </Button>
             </div>
diff --git a/src/pages/preference/widget/PreviewConfigPanel.less b/src/pages/preference/widget/PreviewConfigPanel.less
new file mode 100644
index 0000000..bdbcc1a
--- /dev/null
+++ b/src/pages/preference/widget/PreviewConfigPanel.less
@@ -0,0 +1,4 @@
+
+.widget-preview-config-panel {
+
+}
diff --git a/src/pages/preference/widget/PreviewConfigPanel.tsx b/src/pages/preference/widget/PreviewConfigPanel.tsx
new file mode 100644
index 0000000..c9f7bf2
--- /dev/null
+++ b/src/pages/preference/widget/PreviewConfigPanel.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import "./PreviewConfigPanel.less"
+import TankComponent from "../../../common/component/TankComponent";
+import PreviewConfig from "../../../common/model/preference/model/PreviewConfig";
+import PreviewEngine from "../../../common/model/preference/model/PreviewEngine";
+import PreviewEngineCell from "./PreviewEngineCell";
+import {Button} from "antd";
+import {PlusOutlined} from '@ant-design/icons';
+
+interface IProps {
+
+  previewConfig: PreviewConfig
+
+}
+
+interface IState {
+
+}
+
+export default class PreviewConfigPanel extends TankComponent <IProps, IState> {
+
+  constructor(props: IProps) {
+    super(props)
+    this.state = {}
+  }
+
+  componentDidMount() {
+
+  }
+
+  addEngine() {
+
+    let previewConfig: PreviewConfig = this.props.previewConfig
+
+    let engine: PreviewEngine = new PreviewEngine()
+
+    previewConfig.previewEngines.push(engine)
+
+    this.updateUI()
+
+  }
+
+  render() {
+
+    let that = this
+
+    let previewConfig: PreviewConfig = this.props.previewConfig
+
+    return (
+
+      <div className="widget-preview-config-panel">
+
+        {previewConfig.previewEngines.map((previewEngine: PreviewEngine, index: number) => {
+          return <PreviewEngineCell key={index} previewEngine={previewEngine}/>
+        })}
+
+        <Button type="dashed" block={true} icon={<PlusOutlined/>} onClick={this.addEngine.bind(this)}>
+          添加一个预览引擎
+        </Button>
+
+      </div>
+
+    )
+  }
+}
+
diff --git a/src/pages/preference/widget/PreviewEngineCell.less b/src/pages/preference/widget/PreviewEngineCell.less
new file mode 100644
index 0000000..5f1e014
--- /dev/null
+++ b/src/pages/preference/widget/PreviewEngineCell.less
@@ -0,0 +1,7 @@
+
+.widget-preview-engine-cell {
+
+
+
+
+}
diff --git a/src/pages/preference/widget/PreviewEngineCell.tsx b/src/pages/preference/widget/PreviewEngineCell.tsx
new file mode 100644
index 0000000..8465580
--- /dev/null
+++ b/src/pages/preference/widget/PreviewEngineCell.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import "./PreviewEngineCell.less"
+import TankComponent from "../../../common/component/TankComponent";
+import PreviewEngine from "../../../common/model/preference/model/PreviewEngine";
+
+interface IProps {
+
+  previewEngine: PreviewEngine
+
+}
+
+interface IState {
+
+}
+
+export default class PreviewEngineCell extends TankComponent <IProps, IState> {
+
+  constructor(props: IProps) {
+    super(props)
+    this.state = {}
+  }
+
+  componentDidMount() {
+
+  }
+
+  render() {
+
+    let that = this
+    let previewEngine: PreviewEngine = this.props.previewEngine
+
+    return (
+
+      <div className="widget-preview-engine-cell">
+
+        URL: {previewEngine.url}
+        extension: {previewEngine.extensions}
+
+      </div>
+
+    )
+  }
+}
+