Add features (#1)

* feature: store

* feature: finish almost feature, store before refactor

* feature: bug

* feature: finish

* fearture: finish agian

editor.md/examples/change-mode.html

@@ -292,13 +292,13 @@ <h1>Chnage mode</h1>
 
             loader = new URLLoader();
             loader.load(new URLRequest(url));
-			loader.addEventListener(Event.OPEN, preloadHandler);
+			loader.addEventListener(Event.OPEN, prepageLoadHandler);
 			loader.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
 			loader.addEventListener(ProgressEvent.PROGRESS, progressHandler);
             loader.addEventListener(Event.COMPLETE, loadedHandler);
 		}
 
-		private function preloadHandler(event:Event) : void
+		private function prepageLoadHandler(event:Event) : void
         {
 			onpreload = onpreload || new Function;
 			onpreload(event);

layout.css

@@ -1,6 +1,5 @@
 #nav {
     line-height:30px;
-    // background-color:#eeeeee;
     height:300px;
     width:20%;
     float:left;
@@ -11,3 +10,98 @@
     float:left;
     padding:10px;	 	 
 }
+#container {
+  position: absolute;
+  left: 20px;
+  bottom: 20px;
+  width: 200px;
+  text-align: center;
+  font-size: 16px;
+}
+#selector {
+  max-height: 300px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  /* border: 1px solid; */
+  background-color: #f4f5f7;
+  border-radius: 4px 4px 0 0;
+  visibility: hidden;
+}
+#selector:hover {
+  cursor: pointer;
+}
+.selector__item.active {
+  color: #67C23A;
+}
+
+button:hover {
+  cursor: pointer;
+}
+.action--delete {
+  background-color: #e6a23c;
+  border-color: #e6a23c;
+}
+.action--revert {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  width: 20px;
+  height: 20px;
+  background-color: #eeeeee;
+  border: 1px solid #d7d8da;
+  border-radius: 50%;
+}
+.action--revert:hover {
+  cursor: pointer;
+  background-color: #909399;
+}
+.input {
+  -webkit-appearance: none;
+  background-color: #eeeeee;
+  background-image: none;
+  border-radius: 4px;
+  border: 1px solid #d7d8da;
+  box-sizing: border-box;
+  color: #909399;
+  display: inline-block;
+  font-size: inherit;
+  height: 40px;
+  line-height: 40px;
+  outline: none;
+  padding: 0 15px;
+  margin-bottom: 20px;
+  transition: border-color .2s cubic-bezier(.645,.045,.355,1);
+  width: 100%;
+}
+.input:focus {
+  outline: none;
+  border-color: #409eff;
+  background-color: #fff;
+}
+.current-error {
+  border-color: #fb5549;
+}
+.selector__item {
+  position: relative;
+  color: #606266;
+}
+.selector__item:hover {
+  background-color: #909399;
+}
+.selector__item-span {
+  display: inline-block;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px 30px 10px 30px;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+.selector__item-delete {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: #F56C6C;
+  border-radius: 50%;
+}