diff --git a/css/common/import-pic.less b/css/common/import-pic.less
index e750fbf..a2f2960 100644
--- a/css/common/import-pic.less
+++ b/css/common/import-pic.less
@@ -25,6 +25,10 @@
             overflow: auto;
         }
 
+        .canvas-left {
+            border-right: 1px solid #BAC1CB;
+        }
+
         &.fitpanel {
             canvas {
                 max-width: 100%;
@@ -35,6 +39,7 @@
         &.showleft {
             .canvas-left {
                 width: 100%;
+                border-right: none;
                 display: inline-block;
             }
             .canvas-right {
diff --git a/css/preview.less b/css/preview.less
index c6c57fa..b0f892c 100644
--- a/css/preview.less
+++ b/css/preview.less
@@ -15,7 +15,7 @@
 
 .helps {
     margin-top:40px;
-    
+
     pre {
         padding:20px;
         margin:10px 0;
@@ -54,5 +54,5 @@
         color: green;
         font-weight: bold;
     }
-    
+
 }
diff --git a/edp-build-config.js b/edp-build-config.js
index b0df4d3..3b58d0c 100644
--- a/edp-build-config.js
+++ b/edp-build-config.js
@@ -17,6 +17,15 @@ exports.getProcessors = function () {
                 relativeUrls: false
             }
         }),
+
+
+        new Html2JsCompiler({
+            mode: 'default',
+            files: ['src/fonteditor/template/**/*.tpl'],
+            extnames: ['tpl'],
+            combine: true
+        }),
+
         new ModuleCompiler( {
             files: [
                 'src/fonteditor/main.js'
@@ -24,6 +33,13 @@ exports.getProcessors = function () {
             configFile: './module.conf'
         }),
 
+        new Html2JsCompiler({
+            mode: 'default',
+            files: ['src/fonteditor/template/**/*.tpl'],
+            extnames: ['tpl'],
+            clean: true
+        }),
+
         new JsCompressor({
             files: [
                 'src/fonteditor/main.js',
@@ -54,9 +70,10 @@ exports.exclude = [
     "*.bat",
     "*.md",
     "demo",
-    "agent/*",
+    "agent",
     "mock",
-    "test/*",
+    "test",
+    "unittest",
     "edp-*",
     "output",
     ".DS_Store",
diff --git a/edp-webserver-config.js b/edp-webserver-config.js
index 78ab407..22fa8df 100644
--- a/edp-webserver-config.js
+++ b/edp-webserver-config.js
@@ -1,4 +1,4 @@
-exports.port = 8008;
+exports.port = 9999;
 exports.directoryIndexes = true;
 exports.documentRoot = __dirname;
 exports.getLocations = function () {
@@ -26,7 +26,15 @@ exports.getLocations = function () {
                 less()
             ]
         },
-
+        {
+            location: /\.tpl\.js/,
+            handler: [
+                html2js({
+                    wrap: true,
+                    mode: 'default'
+                })
+            ]
+        },
 
         {
             location: /^.*$/,
diff --git a/src/fonteditor/controller/actions.js b/src/fonteditor/controller/actions.js
index 0e8dcd9..7e72b81 100644
--- a/src/fonteditor/controller/actions.js
+++ b/src/fonteditor/controller/actions.js
@@ -263,8 +263,10 @@ define(
 
                                 if (program.editor.isVisible()) {
                                     program.editor.execCommand('addcontours', setting.contours, {
+                                        scale: 1,
                                         selected: true
                                     });
+                                    editorDelayFocus();
                                 }
                                 else {
                                     var selected = program.viewer.getSelected();
diff --git a/src/fonteditor/controller/default.js b/src/fonteditor/controller/default.js
index 90c0b1e..26f7cd4 100644
--- a/src/fonteditor/controller/default.js
+++ b/src/fonteditor/controller/default.js
@@ -527,6 +527,13 @@ define(
                         hideEditor();
                     }
                 }
+                // F3, F4
+                else if (e.keyCode === 114 || e.keyCode === 115) {
+                    var ttf = program.ttfManager.get();
+                    if (ttf) {
+                        program.previewer.load(ttf, e.keyCode === 114 ? 'ttf' : 'woff');
+                    }
+                }
             });
         }
 
diff --git a/src/fonteditor/dialog/setting-import-pic.js b/src/fonteditor/dialog/setting-import-pic.js
index d64cbad..f3d3da8 100644
--- a/src/fonteditor/dialog/setting-import-pic.js
+++ b/src/fonteditor/dialog/setting-import-pic.js
@@ -7,7 +7,7 @@
 define(
     function (require) {
 
-        var TPL = require('text!template/dialog/setting-import-pic.tpl');
+        var TPL_FILE = require('../template/dialog/setting-import-pic.tpl');
 
         var lang = require('common/lang');
         var program = require('../widget/program');
@@ -281,7 +281,7 @@ define(
             style: 'import-pic-dialog',
 
             getTpl: function () {
-                return TPL;
+                return TPL_FILE;
             },
 
             set: function () {
diff --git a/src/template/dialog/setting-import-pic.tpl b/src/fonteditor/template/dialog/setting-import-pic.tpl
similarity index 100%
rename from src/template/dialog/setting-import-pic.tpl
rename to src/fonteditor/template/dialog/setting-import-pic.tpl
diff --git a/src/fonteditor/template/export-render.js b/src/fonteditor/template/export-render.js
new file mode 100644
index 0000000..59538da
--- /dev/null
+++ b/src/fonteditor/template/export-render.js
@@ -0,0 +1,57 @@
+/**
+ * @file html渲染器
+ * @author mengke01(kekee000@gmail.com)
+ */
+
+
+define(
+    function (require) {
+        var utpl = require('utpl');
+
+        var fontExampleRender = null; // 图标示例渲染器
+        var fontCssRender = null; // 图标css渲染器
+        var tplPreviewCss = null; // 预览css样式
+
+
+        $.get('./css/preview.css', function (text) {
+            tplPreviewCss = text;
+        });
+
+        var render = {
+
+            /**
+             * 渲染图标示例
+             *
+             * @param  {Object} iconData 图标数据
+             * @return {string}          html片段
+             */
+            renderFontExample: function (iconData) {
+                fontExampleRender = fontExampleRender || utpl.template(require('./icon-example.tpl'));
+                return fontExampleRender(iconData);
+            },
+
+
+            /**
+             * 渲染图标css
+             *
+             * @param  {Object} iconData 图标数据
+             * @return {string}          html片段
+             */
+            renderFontCss: function (iconData) {
+                fontCssRender = fontCssRender || utpl.template(require('./icon-css.tpl'));
+                return fontCssRender(iconData);
+            },
+
+            /**
+             * 渲染预览css
+             *
+             * @return {string} html片段
+             */
+            renderPreviewCss: function () {
+                return tplPreviewCss;
+            }
+        };
+
+        return render;
+    }
+);
diff --git a/src/template/icon-css.tpl b/src/fonteditor/template/icon-css.tpl
similarity index 100%
rename from src/template/icon-css.tpl
rename to src/fonteditor/template/icon-css.tpl
diff --git a/src/template/icon-example.tpl b/src/fonteditor/template/icon-example.tpl
similarity index 100%
rename from src/template/icon-example.tpl
rename to src/fonteditor/template/icon-example.tpl
diff --git a/src/fonteditor/template/preview-render.js b/src/fonteditor/template/preview-render.js
new file mode 100644
index 0000000..e2d585e
--- /dev/null
+++ b/src/fonteditor/template/preview-render.js
@@ -0,0 +1,32 @@
+/**
+ * @file 预览渲染器
+ * @author mengke01(kekee000@gmail.com)
+ */
+
+
+define(
+    function (require) {
+
+        var utpl = require('utpl');
+        var previewRender = null; // 预览渲染器
+
+        var render = {
+
+            /**
+             * 渲染预览页面
+             *
+             * @param  {Object} data 预览页渲染数据
+             * @param  {Object} data.fontData 字体数据
+             * @param  {Object} data.fontFormat 字体格式
+             *
+             * @return {string}          html片段
+             */
+            renderPreview: function (data) {
+                previewRender = previewRender || utpl.template(require('./preview-ttf.tpl'));
+                return previewRender(data);
+            }
+        };
+
+        return render;
+    }
+);
diff --git a/src/fonteditor/template/preview-ttf.tpl b/src/fonteditor/template/preview-ttf.tpl
new file mode 100644
index 0000000..adb076d
--- /dev/null
+++ b/src/fonteditor/template/preview-ttf.tpl
@@ -0,0 +1,54 @@
+<link rel="stylesheet" href="./css/preview.css">
+<style>
+    @font-face {
+        font-family: '{%=fontFamily%}';
+        {%if(fontFormat=='eot'){%}
+        src: url({%=fontData%});
+        {%} else if(fontFormat=='ttf') {%}
+        src: url({%=fontData%}) format('truetype');
+        {%} else {%}
+        src: url({%=fontData%}) format('{%=fontFormat%}');
+        {%}%}
+    }
+    .icon {
+        font-family: '{%=fontFamily%}';
+    }
+</style>
+<div class="main">
+    <h1>预览{%=fontFormat%}格式字体</h1>
+    <ul class="icon-list">
+        {%glyfList.forEach(function(glyf) {%}
+        <li>
+            <i class="icon">{%=glyf.code%}</i>
+            <div class="code">{%=glyf.codeName%}</div>
+            <div class="name">{%=glyf.name%}</div>
+        </li>
+        {%});%}
+    </ul>
+    <div class="helps">第一步：使用font-face声明字体
+<pre>
+@font-face {
+    font-family: '{%=fontFamily%}';
+    src: url('{%=fontFamily%}.eot'); /* IE9*/
+    src: url('{%=fontFamily%}.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('{%=fontFamily%}.woff') format('woff'), /* chrome、firefox */
+    url('{%=fontFamily%}.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
+    url('{%=fontFamily%}.svg#ux{%=fontFamily%}') format('svg'); /* iOS 4.1- */
+}
+</pre>
+第二步：定义使用{%=fontFamily%}的样式
+<pre>
+.{%=fontFamily%} {
+    font-family:"{%=fontFamily%}" !important;
+    font-size:16px;font-style:normal;
+    -webkit-font-smoothing: antialiased;
+    -webkit-text-stroke-width: 0.2px;
+    -moz-osx-font-smoothing: grayscale;
+}
+</pre>
+第三步：挑选相应图标并获取字体编码，应用于页面
+<pre>
+    &lt;i class="{%=fontFamily%}"&gt;&amp;#x33&lt;/i&gt;
+</pre>
+</div>
+</div>
diff --git a/src/fonteditor/widget/exporter.js b/src/fonteditor/widget/exporter.js
index 38ad8cf..8ed9090 100644
--- a/src/fonteditor/widget/exporter.js
+++ b/src/fonteditor/widget/exporter.js
@@ -16,22 +16,8 @@ define(
         var ttf2svg = require('ttf/ttf2svg');
         var ttf2icon = require('ttf/ttf2icon');
         var bytes2base64 = require('ttf/util/bytes2base64');
+        var exportRender = require('../template/export-render');
         var JSZip = require('JSZip');
-        var utpl = require('utpl');
-
-        // icon tpl
-        var tplExample = require('text!template/icon-example.tpl');
-        var renderExample = utpl.template(tplExample);
-
-        // icon css
-        var tplCss = require('text!template/icon-css.tpl');
-
-        // example css
-        // @坑
-        var tplPreviewCss = '';
-
-        // css render
-        var renderCss = utpl.template(tplCss);
 
         /**
          * 导出SFNT结构字体 base64
@@ -81,8 +67,8 @@ define(
         function exportFile(ttf, options) {
 
             if (ttf) {
-                try {
 
+                try {
                     var base64Str = '';
                     var fileName = (options.fileName || ttf.name.fontFamily || 'export');
 
@@ -111,19 +97,19 @@ define(
                         // css
                         fontzip.file(
                             'icon.css',
-                            renderCss(iconData)
+                            exportRender.renderFontCss(iconData)
                         );
 
                         // page
                         fontzip.file(
                             'page.css',
-                            tplPreviewCss
+                            exportRender.renderPreviewCss()
                         );
 
                         // html
                         fontzip.file(
                             'example.html',
-                            renderExample(iconData)
+                            exportRender.renderFontExample(iconData)
                         );
 
                         // zip
@@ -170,16 +156,6 @@ define(
 
 
         var exporter = {
-            /**
-             * 初始化
-             */
-            init: function () {
-                if (!tplPreviewCss) {
-                    $.get('./css/prevew.css', function (text) {
-                        tplPreviewCss = text;
-                    });
-                }
-            },
             'export': exportFile
         };
 
diff --git a/src/fonteditor/widget/previewer.js b/src/fonteditor/widget/previewer.js
index 8a0b8c4..525b016 100644
--- a/src/fonteditor/widget/previewer.js
+++ b/src/fonteditor/widget/previewer.js
@@ -22,7 +22,7 @@ define(
         var extend = require('common/lang').extend;
         var ttf2icon = require('ttf/ttf2icon');
 
-        var previewTplRender = null; // 模板渲染函数
+        var previewRender = require('../template/preview-render'); // 模板渲染函数
 
         var isIE = !!window.ActiveXObject || 'ActiveXObject' in window;
 
@@ -34,7 +34,7 @@ define(
          * @return {string} html字符串
          */
         function generatePreviewHTML(ttf, fontFormat) {
-            fontFormat = !fontFormat || fontFormat === 'ttf' ? 'truetype' : fontFormat;
+            fontFormat = fontFormat || ttf;
 
             var fontData = '';
             var buffer;
@@ -63,23 +63,12 @@ define(
                 ttf2icon(ttf)
             );
 
-            return previewTplRender(data);
+            return previewRender.renderPreview(data);
         }
 
 
         var previewer = {
 
-            /**
-             * 初始化
-             */
-            init: function () {
-                if (!previewTplRender) {
-                    previewTplRender = utpl.template(
-                        require('text!template/preview-ttf.tpl')
-                    );
-                }
-            },
-
             /**
              * 加载预览按钮
              *
@@ -109,8 +98,6 @@ define(
             }
         };
 
-        previewer.init();
-
         return previewer;
     }
 );
diff --git a/src/template/preview-ttf.tpl b/src/template/preview-ttf.tpl
deleted file mode 100644
index e144cac..0000000
--- a/src/template/preview-ttf.tpl
+++ /dev/null
@@ -1,52 +0,0 @@
-    <link rel="stylesheet" href="./css/preview.css">
-    <style>
-        @font-face {
-            font-family: '{%=fontFamily%}';
-            {%if(fontFormat=='eot'){%}
-            src: url({%=fontData%});
-            {%} else {%}
-            src: url({%=fontData%}) format('{%=fontFormat%}');
-            {%}%}
-        }
-        .icon {
-            font-family: '{%=fontFamily%}';
-        }
-    </style>
-    <div class="main">
-        <h1>fonteditor图标</h1>
-        <ul class="icon-list">
-            {%glyfList.forEach(function(glyf) {%}
-            <li>
-                <i class="icon">{%=glyf.code%}</i>
-                <div class="code">{%=glyf.codeName%}</div>
-                <div class="name">{%=glyf.name%}</div>
-            </li>
-            {%});%}
-        </ul>
-        <div class="helps">第一步：使用font-face声明字体
-<pre>
-@font-face {
-    font-family: '{%=fontFamily%}';
-    src: url('{%=fontFamily%}.eot'); /* IE9*/
-    src: url('{%=fontFamily%}.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-    url('{%=fontFamily%}.woff') format('woff'), /* chrome、firefox */
-    url('{%=fontFamily%}.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
-    url('{%=fontFamily%}.svg#ux{%=fontFamily%}') format('svg'); /* iOS 4.1- */
-}
-</pre>
-            第二步：定义使用{%=fontFamily%}的样式
-<pre>
-.{%=fontFamily%} {
-    font-family:"{%=fontFamily%}" !important;
-    font-size:16px;font-style:normal;
-    -webkit-font-smoothing: antialiased;
-    -webkit-text-stroke-width: 0.2px;
-    -moz-osx-font-smoothing: grayscale;
-}
-</pre>
-            第三步：挑选相应图标并获取字体编码，应用于页面
-<pre>
-&lt;i class="{%=fontFamily%}"&gt;&amp;#x33&lt;/i&gt;
-</pre>
-        </div>
-    </div>