diff --git a/css/common/common.less b/css/common/common.less
index 69414fa..5377d34 100644
--- a/css/common/common.less
+++ b/css/common/common.less
@@ -1,3 +1,4 @@
+@import './reset.less';
 
 @import './bootstrap.less';
 
diff --git a/css/common/editor.less b/css/common/editor.less
index 9b32d80..597cc0b 100644
--- a/css/common/editor.less
+++ b/css/common/editor.less
@@ -1,25 +1,6 @@
 
 // 编辑器样式集合
 
-.close-editor {
-    .ico();
-    .i-ico('\e611');
-
-    position: absolute;
-    right: 0;
-    top: 0;
-    z-index: 100;
-    padding: 0 3px;
-    z-index: 100;
-    font-size: 14px;
-    background: #FFF;
-    border-left: 1px solid #000;
-    display: none;
-    &:hover {
-        cursor: pointer
-    }
-}
-
 .glyf-editor {
 
     width: 100%;
@@ -28,30 +9,6 @@
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
-    
-    .editor-contextmenu {
-
-        width: 120px;
-        border: 1px solid #999;
-        background: #FEFEFE;
-        line-height: 24px;
-        padding: 0 4px;
-        box-shadow: 1px 1px 1px #CCC;
-
-        div {
-            padding-left: 10px;
-            cursor: pointer;
-            border-bottom: 1px solid #CCC;
-        }
-
-        div:hover {
-            background: #EEE;
-        }
-
-        div:last-child {
-            border-bottom: none;
-        }
-    }
 
     .marker-x,
     .marker-y {
@@ -73,8 +30,60 @@
     }
 }
 
+.editor-contextmenu {
+
+    color: #333;
+    width: 140px;
+    border: 1px solid #999;
+    background: #FEFEFE;
+    line-height: 24px;
+    padding: 0 4px;
+    box-shadow: 1px 1px 1px #CCC;
+    position: absolute;
+
+    li {
+        padding-left: 10px;
+        cursor: pointer;
+        border-bottom: 1px solid #CCC;
+        >ul {
+            display: none;
+            color: #333;
+            width: 140px;
+            border: 1px solid #999;
+            background: #FEFEFE;
+            line-height: 24px;
+            padding: 0 4px;
+            box-shadow: 1px 1px 1px #CCC;
+            position: absolute;
+            margin-left: 120px;
+        }
+    }
+
+    >li[data-sub] {
+        color: green;
+        &:after {
+            content:'>';
+            margin-right: 10px;
+            float: right;
+            font-family: 'Simsun';
+        }
+    }
+
+    li:hover {
+        background: #EEE;
+        >ul {
+            display: block;
+        }
+    }
+
+    li:last-child {
+        border-bottom: none;
+    }
+}
+
 .editor:hover {
     .close-editor {
         display: block;
     }
-}
\ No newline at end of file
+}
+
diff --git a/css/common/ico.less b/css/common/ico.less
index 03563c3..b4f1ae8 100644
--- a/css/common/ico.less
+++ b/css/common/ico.less
@@ -41,4 +41,23 @@
 .i-github {
     .ico();
     .i-ico('\e600');
+}
+
+.close-editor {
+    .ico();
+    .i-ico('\e611');
+
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 100;
+    padding: 0 3px;
+    z-index: 100;
+    font-size: 14px;
+    background: #FFF;
+    border-left: 1px solid #000;
+    display: none;
+    &:hover {
+        cursor: pointer
+    }
 }
\ No newline at end of file
diff --git a/demo/contoursCombine.html b/demo/contoursCombine.html
index 04b2da3..28fa199 100644
--- a/demo/contoursCombine.html
+++ b/demo/contoursCombine.html
@@ -19,7 +19,7 @@
         define('jquery', $);
     </script>
 
-    <div id="render-view" class="render-view" oncontextMenu="return false"></div>
+    <div id="render-view" class="render-view glyf-editor" oncontextMenu="return false"></div>
 
     <script>
         require(['demo/contoursCombine']);
diff --git a/demo/css/editor.css b/demo/css/editor.css
index 2c7d92c..4d7ab6f 100644
--- a/demo/css/editor.css
+++ b/demo/css/editor.css
@@ -15,6 +15,78 @@ a:hover {
 .hide {
   display: none;
 }
+.glyf-editor {
+  width: 100%;
+  height: 100%;
+  font-size: 12px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+.glyf-editor .marker-x,
+.glyf-editor .marker-y {
+  position: absolute;
+  width: 0;
+  height: 0;
+  z-index: 60;
+  pointer-events: none;
+}
+.glyf-editor .marker-x {
+  width: 20px;
+  border-top: 1px dashed #000;
+}
+.glyf-editor .marker-y {
+  height: 20px;
+  border-left: 1px dashed #000;
+}
+.editor-contextmenu {
+  color: #333;
+  width: 140px;
+  border: 1px solid #999;
+  background: #FEFEFE;
+  line-height: 24px;
+  padding: 0 4px;
+  box-shadow: 1px 1px 1px #CCC;
+  position: absolute;
+}
+.editor-contextmenu li {
+  padding-left: 10px;
+  cursor: pointer;
+  border-bottom: 1px solid #CCC;
+}
+.editor-contextmenu li > ul {
+  display: none;
+  color: #333;
+  width: 140px;
+  border: 1px solid #999;
+  background: #FEFEFE;
+  line-height: 24px;
+  padding: 0 4px;
+  box-shadow: 1px 1px 1px #CCC;
+  position: absolute;
+  margin-left: 120px;
+}
+.editor-contextmenu > li[data-sub] {
+  color: green;
+}
+.editor-contextmenu > li[data-sub]:after {
+  content: '>';
+  margin-right: 10px;
+  float: right;
+  font-family: 'Simsun';
+}
+.editor-contextmenu li:hover {
+  background: #EEE;
+}
+.editor-contextmenu li:hover > ul {
+  display: block;
+}
+.editor-contextmenu li:last-child {
+  border-bottom: none;
+}
+.editor:hover .close-editor {
+  display: block;
+}
 body,
 html {
   height: 100%;
@@ -26,40 +98,3 @@ html {
   position: relative;
   -webkit-text-size-adjust: none;
 }
-#render-view .editor-contextmenu {
-  width: 120px;
-  border: 1px solid #999;
-  background: #FEFEFE;
-  line-height: 24px;
-  padding: 0 4px;
-  box-shadow: 1px 1px 1px #CCC;
-}
-#render-view .editor-contextmenu div {
-  padding-left: 10px;
-  cursor: pointer;
-  border-bottom: 1px solid #CCC;
-}
-#render-view .editor-contextmenu div:hover {
-  background: #EEE;
-}
-#render-view .editor-contextmenu div:last-child {
-  border-bottom: none;
-}
-#render-view .marker-x,
-#render-view .marker-y {
-  position: absolute;
-  width: 0;
-  height: 0;
-  z-index: 60;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-}
-#render-view .marker-x {
-  width: 20px;
-  border-top: 1px dashed #000;
-}
-#render-view .marker-y {
-  height: 20px;
-  border-left: 1px dashed #000;
-}
diff --git a/demo/css/editor.less b/demo/css/editor.less
index c532b5c..a5a9e22 100644
--- a/demo/css/editor.less
+++ b/demo/css/editor.less
@@ -1,4 +1,5 @@
 @import './reset';
+@import '../../css/common/editor';
 
 body, html {
     height: 100%;
@@ -10,47 +11,4 @@ body, html {
     height: 100%;
     position: relative;
     -webkit-text-size-adjust: none;
-
-    .editor-contextmenu {
-        width: 120px;
-        border: 1px solid #999;
-        background: #FEFEFE;
-        line-height: 24px;
-        padding: 0 4px;
-        box-shadow: 1px 1px 1px #CCC;
-
-        div {
-            padding-left: 10px;
-            cursor: pointer;
-            border-bottom: 1px solid #CCC;
-        }
-
-        div:hover {
-            background: #EEE;
-        }
-
-        div:last-child {
-            border-bottom: none;
-        }
-
-    }
-
-    .marker-x,
-    .marker-y {
-        position: absolute;
-        width: 0;
-        height: 0;
-        z-index: 60;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-    }
-    .marker-x {
-        width: 20px;
-        border-top: 1px dashed #000;
-    }
-    .marker-y {
-        height: 20px;
-        border-left: 1px dashed #000;
-    }
 }
\ No newline at end of file
diff --git a/demo/editor.html b/demo/editor.html
index 3c6c34b..b79e9d8 100644
--- a/demo/editor.html
+++ b/demo/editor.html
@@ -19,7 +19,7 @@
         define('jquery', $);
     </script>
 
-    <div id="render-view" class="render-view" oncontextMenu="return false"></div>
+    <div id="render-view" class="render-view glyf-editor" oncontextMenu="return false"></div>
 
     <script>
         require(['demo/editor']);
diff --git a/demo/editortest.html b/demo/editortest.html
index d58bd49..50436ac 100644
--- a/demo/editortest.html
+++ b/demo/editortest.html
@@ -37,7 +37,7 @@
         <div id="glyf-list" class="glyf-list"></div>
     </div>
 
-    <div id="render-view" class="render-view" oncontextMenu="return false"></div>
+    <div id="render-view" class="render-view glyf-editor" oncontextMenu="return false"></div>
 
     <script>
         require(['demo/editortest']);
diff --git a/src/editor/command/support.js b/src/editor/command/support.js
index f56760e..011bc0a 100644
--- a/src/editor/command/support.js
+++ b/src/editor/command/support.js
@@ -12,6 +12,7 @@ define(
 
         var lang = require('common/lang');
         var computeBoundingBox = require('graphics/computeBoundingBox');
+        var shapesSupport = require('../shapes/support');
 
         var support = {
 
@@ -31,24 +32,19 @@ define(
 
 
             /**
-             * 添加shape
+             * 添加path
              */
-            addshape: function() {
-                this.setMode('addshape');
+            addpath: function() {
+                this.setMode('addpath');
             },
 
             /**
-             * 添加rect
+             * 添加自选图形
              */
-            addrect: function() {
-                this.setMode('addrect');
-            },
-
-            /**
-             * 添加circle
-             */
-            addcircle: function() {
-                this.setMode('addcircle');
+            addsupportshapes: function(type) {
+                if (shapesSupport[type]) {
+                    this.setMode('addshapes', lang.clone(shapesSupport[type]));
+                }
             },
 
             /**
@@ -65,8 +61,11 @@ define(
             /**
              * 反转shape
              */
-            reversepoint: function(shape) {
-                shape.points = shape.points.reverse();
+            reversepoint: function(shapes) {
+                shapes.forEach(function(shape) {
+                    shape.points = shape.points.reverse();
+                });
+
                 this.fontLayer.refresh();
             },
 
diff --git a/src/editor/controller/initRender.js b/src/editor/controller/initRender.js
index 775bcd7..3094e8e 100644
--- a/src/editor/controller/initRender.js
+++ b/src/editor/controller/initRender.js
@@ -49,6 +49,10 @@ define(
                     this.fire('change');
                 }
             }
+            else if (e.command == 'add_supportshapes') {
+                var type = e.args.type;
+                this.execCommand('addsupportshapes', type);
+            }
             else {
                 this.execCommand(e.command, e);
             }
diff --git a/src/editor/menu/commandList.js b/src/editor/menu/commandList.js
index ecb6bbc..e535267 100644
--- a/src/editor/menu/commandList.js
+++ b/src/editor/menu/commandList.js
@@ -9,186 +9,11 @@
 
 define(
     function(require) {
-
-        // 点编辑命令
-        var pointCommand = {
-            'add': {
-                title: '添加点'
-            },
-
-            'remove': {
-                title: '删除点'
-            },
-
-            'onCurve': {
-                title: '在曲线上'
-            },
-
-            'offCurve': {
-                title: '远离曲线'
-            },
-
-            'asStart': {
-                title: '作为开始点'
-            }
-        };
-
-        // 路径编辑命令
-        var shapeCommand = {
-
-            'remove': {
-                title: '删除轮廓'
-            },
-
-            'reverse_point': {
-                title: '改变方向'
-            },
-
-            'cut': {
-                title: '剪切'
-            },
-
-            'copy': {
-                title: '复制'
-            },
-
-            'top': {
-                title: '置前'
-            },
-
-            'bottom': {
-                title: '置后'
-            },
-
-            'up': {
-                title: '上移一层'
-            },
-
-            'down': {
-                title: '下移一层'
-            },
-
-            'rotate_left': {
-                title: '向左旋转'
-            },
-
-            'rotate_right': {
-                title: '向右旋转'
-            },
-
-            'reverse_shapes': {
-                title: '翻转'
-            },
-
-            'mirror_shapes': {
-                title: '镜像'
-            },
-            
-            'add_referenceline': {
-                title: '添加边界参考线'
-            }
-        };
-
-        var shapesCommand = {
-
-            'addshape': {
-                title: '添加轮廓'
-            },
-
-            'remove': {
-                title: '删除轮廓'
-            },
-            
-            'cut': {
-                title: '剪切'
-            },
-
-            'copy': {
-                title: '复制'
-            },
-
-            'join_shapes': {
-                title: '结合'
-            },
-            
-            'intersect_shapes': {
-                title: '相交'
-            },
-
-            'tangency_shapes': {
-                title: '相切'
-            },
-
-            'rotate_left': {
-                title: '向左旋转'
-            },
-
-            'rotate_right': {
-                title: '向右旋转'
-            },
-
-            'reverse_shapes': {
-                title: '翻转'
-            },
-
-            'mirror_shapes': {
-                title: '镜像'
-            },
-
-            'add_referenceline': {
-                title: '添加边界参考线'
-            }
-        };
-
-
-        var editorCommand = {
-
-            'addshape': {
-                title: '添加轮廓'
-            },
-
-            'addrect': {
-                title: '添加矩形'
-            },
-
-            'addcircle': {
-                title: '添加圆'
-            },
-
-            'undo': {
-                title: '撤销'
-            },
-
-            'redo': {
-                title: '恢复'
-            },
-
-            'paste': {
-                title: '粘贴'
-            },
-
-            'add_referenceline': {
-                title: '添加参考线'
-            },
-            
-            'clearreferenceline': {
-                title: '清除参考线'
-            },
-
-            'rescale': {
-                title: '重置缩放'
-            },
-
-            'font': {
-                title: '字形信息'
-            }
-        };
-
         return {
-            point: pointCommand,
-            shape: shapeCommand,
-            shapes: shapesCommand,
-            editor: editorCommand
+            point: require('./point'),
+            shape: require('./shape'),
+            shapes: require('./shapes'),
+            editor: require('./editor')
         };
     }
 );
diff --git a/src/editor/widget/ContextMenu.js b/src/editor/widget/ContextMenu.js
index 9bda94e..e39953d 100644
--- a/src/editor/widget/ContextMenu.js
+++ b/src/editor/widget/ContextMenu.js
@@ -18,13 +18,13 @@ define(
          * @return {HTMLElement} 浮动层对象
          */
         function createPopup(container, options) {
-            var div = document.createElement('div');
-            div.className = options.className || 'editor-contextmenu';
-            div.style.position = 'absolute';
-            div.style.zIndex = options.zIndex || 1000;
-            div.style.display = 'none';
-            container.appendChild(div);
-            return div;
+            var menu = document.createElement('ul');
+            menu.className = options.className || 'editor-contextmenu';
+            menu.style.position = 'absolute';
+            menu.style.zIndex = options.zIndex || 1000;
+            menu.style.display = 'none';
+            container.appendChild(menu);
+            return menu;
         }
 
 
@@ -42,11 +42,14 @@ define(
 
             var me = this;
             me.main.addEventListener('click', me['_command_click'] = function(e) {
-                var key = e.target.getAttribute('data-key');
-                if (key) {
+
+                var id = e.target.getAttribute('data-id');
+                var superId = e.target.getAttribute('data-super');
+                if (id) {
+                    var command = (!!superId ? me.commands[superId].items : me.commands)[id];
                     var event = {
-                        command: key,
-                        commandArgs: me.commands[key],
+                        command: command.name,
+                        args: command,
                         pos: me.pos
                     };
                     me.onClick && me.onClick(event);
@@ -69,8 +72,21 @@ define(
              */
             setCommands: function(commands) {
                 var str = '';
-                Object.keys(commands).forEach(function(key) {
-                    str += '<div data-key="'+ key +'">'+ commands[key].title +'</div>';
+                commands.forEach(function(command, index) {
+                    if (command.items) {
+                        str += '<li data-sub="'+ index +'">';
+                        str += '<ul>';
+                        command.items.forEach(function(subCommand, subIndex) {
+                            str += '<li data-super="'+ index +'" data-id="'+ subIndex +'">'+ subCommand.title +'</li>';
+                        });
+                        str += '</ul>';
+                        str += command.title + '</li>';
+
+                    }
+                    else {
+                        str += '<li data-id="'+ index +'">'+ command.title +'</li>';
+                    }
+
                 });
                 this.commands = commands;
                 this.main.innerHTML = str;
diff --git a/src/fonteditor/widget/actions.js b/src/fonteditor/widget/actions.js
index 4b87e25..8f86972 100644
--- a/src/fonteditor/widget/actions.js
+++ b/src/fonteditor/widget/actions.js
@@ -105,11 +105,13 @@ define(
 
             // 添加新字形
             'add-new': function() {
-                var selected = program.viewer.getSelected();
-                program.ttfManager.insertGlyf({
-                    name: '',
-                    unicode:[]
-                }, selected[0]);
+                if (program.ttfManager.get()) {
+                    var selected = program.viewer.getSelected();
+                    program.ttfManager.insertGlyf({
+                        name: '',
+                        unicode:[]
+                    }, selected[0]);
+                }
             },
 
             // 添加在线字形