From fc21a40401782658f67af5f759e9568763950a3c Mon Sep 17 00:00:00 2001
From: "mail_yanpeng@163.com" <yyyq94581017>
Date: Thu, 27 Aug 2020 13:11:04 +0800
Subject: [PATCH] markdown

---
 controllers/BlogController.go |   2 +
 static/css/common.css         |  16 ++
 static/css/common.min.css     |   3 +-
 views/editblog.html           |  70 +++-----
 views/iframe/blog.html        | 102 ------------
 views/iframe/note.html        |  77 ---------
 views/newblog.html            | 298 ++++++++++++++++++++++++----------
 7 files changed, 257 insertions(+), 311 deletions(-)
 delete mode 100644 views/iframe/blog.html
 delete mode 100644 views/iframe/note.html

diff --git a/controllers/BlogController.go b/controllers/BlogController.go
index d9b3d2b..269a2c9 100644
--- a/controllers/BlogController.go
+++ b/controllers/BlogController.go
@@ -75,6 +75,7 @@ func (this *BlogController) Edit() {
 	id, _ := this.GetInt64("id")
 	title := this.GetString("title")
 	blogHtml := this.GetString("blogHtml")
+	blogValue := this.GetString("blogValue")
 	blogDesc := this.GetString("blogDesc")
 	catory := this.GetString("catory")
 	catoryId, _ := strconv.ParseInt(catory, 10, 64)
@@ -89,6 +90,7 @@ func (this *BlogController) Edit() {
 	blog.BlogHtml = blogHtml
 	blog.BlogDesc = blogDesc
 	blog.CategoryId = catoryId
+	blog.BlogValue = blogValue
 	blog.Utime = time.Now()
 	err = blogService.EditBlog(blog, labels)
 	if err == nil {
diff --git a/static/css/common.css b/static/css/common.css
index 69bf867..5721ffe 100644
--- a/static/css/common.css
+++ b/static/css/common.css
@@ -710,4 +710,20 @@ img {
 }
 .search-content{
     font-size: 12px;
+}
+
+.v-note-wrapper {
+    height: 100%;
+    z-index: 99 !important;
+}
+
+.modal_form{
+    display: flex;
+    margin-bottom: 10px;
+}
+.modal_form .span-lable{
+    display: inline-block;
+    width: 100px;
+    height: 30px;
+    line-height: 30px;
 }
\ No newline at end of file
diff --git a/static/css/common.min.css b/static/css/common.min.css
index 4bd87a0..166a540 100644
--- a/static/css/common.min.css
+++ b/static/css/common.min.css
@@ -1,2 +1 @@
-html,body{font-size:14px!important;background:#fff;color:#353535;height:100%;width:100%}#cnzz_stat_icon_1277992374{text-align:center;display:block}#cnzz_stat_icon_1277992374 a{color:rgba(255,255,255,.7)!important}a{text-decoration:none}.layui-nav{text-align:right}.navbar-default{border-color:#f8d9ea!important}.img-circle-large{width:110px;height:110px}.root-container{height:100%;width:100%;max-width:100%}.nav-container{max-height:50px;position:fixed;width:100%;z-index:1000;left:0;top:0}.nav-container li a:hover{transform:rotate(5deg) scale(1.1)}.nav-container p{display:inline-block;float:left;line-height:48px;font-size:20px}::-webkit-scrollbar{width:1px}::-webkit-scrollbar-track-piece{background-color:rgba(0,0,0,0);-webkit-border-radius:6px}.cursor{cursor:pointer}.footer-root{color:rgba(255,255,255,.7);position:relative;width:100%;height:105px;display:flex}.footer-friend{text-align:center;height:25px;line-height:25px}.footer-friend a{color:rgba(255,255,255,.7);text-decoration:none}.img-circle{width:31px;height:31px;border-radius:50%}.login-footer .wxcode{margin-right:20px}.layui-nav .layui-nav-item{line-height:49px!important}.layui-nav .layui-nav-item a{height:49px!important;line-height:49px}.layui-nav .layui-this:after,.layui-nav-bar,.layui-nav-tree .layui-nav-itemed:after{height:1px}.footer-container{background-color:#393d49;padding:30px 5% 0 5%}.pagination{margin:18px 0}.pagination ul li{line-height:20px;width:20px;height:20px;display:inline-block;border-color:#28a3ef;font-size:16px}.pagination ul li .next .prev{font-size:20px!important}.pagination ul .active{background-color:#28a3ef}.pagination ul .active a{color:#fff}.breadcrumb-container{padding:20px}.blog-root{width:68%;margin:40px auto}.blog-root a{color:#28a3ef!important}.blog-root .blog-title{display:block;margin:60px 0 20px 0;text-align:center}.blog-root .blog-detaile{color:#2f2f2f}.blog-root .blog-detaile pre{border:1px #d2e8b9 solid;box-shadow:1px 1px 2px 2px #d2e8b9;margin:5px 0}.blog-root .blog-detaile h4{font-size:20px;font-weight:500}.blog-user{position:fixed;top:60px;left:5px;width:100px;height:100%;background-color:#f9f9f9}.blog-info{padding:15px}.blog-info .blog-author{display:flex}.blog-info .blog-author .author-headimg{display:inline-block;width:48px;height:48px}.blog-info .blog-author .blog-label{flex:1;height:22px;line-height:22px;text-align:right;padding-top:26px}.blog-info .blog-author .blog-label label{color:#888;border:1px dotted #aaa;padding:5px;border-radius:5px;font-size:10px}.blog-info .blog-author .author-headimg .img-circle{width:48px!important;height:48px!important;margin-top:0!important}.blog-info .blog-author .author-info{display:inline-block;height:48px!important;vertical-align:bottom;text-align:left;margin-left:5px}.blog-info .blog-author .author-info a{display:inline-block;height:28px;line-height:28px;font-size:16px}.blog-info .blog-author .author-info span{display:inline-block;height:20px;line-height:20px;font-size:12px;color:#888;padding-right:8px}.blog-info em{padding:0 8px!important}.comms-root{width:68%;margin:0 auto}.comms-root a{text-decoration:none}img{max-width:100%!important}.blog-referral{width:100%;margin:40px auto}.blog-referral p{padding:3px 0}.layui-code-view .layui-code-ol li{margin-left:0!important}.home-container{height:100%;margin:50px 5% 60px 5%}.home-container hr{margin:0}.home-hearder{margin:10px 0;display:flex;height:30px;line-height:30px}.home-hearder .m-select{color:#353535;width:150px;display:inline-block;height:32px;border-radius:3px;padding:4px 14px}.home-hearder .layui-btn-group .active a{color:#fff}.home-hearder .layui-btn-group a{color:#353535;text-decoration:none}.nelson-btn{color:#ec6149!important;border-radius:15px;border:1px solid #bbb!important}.nelson-btn:hover{background:#fff!important;color:#ec6149!important;border-radius:15px;border:1px solid #ec6149!important}.home-content{display:flex;min-height:36px;line-height:36px}.home-content-title{display:inline-block;flex:1}.home-content-desc{display:flex}.home-content-desc span{display:inline-block;text-align:center}.blog-root h5{color:#888;font-size:14px;margin:9px 0;font-family:inherit;font-weight:700;line-height:1.5}.blog-root a{text-decoration:none}.blog-root p{margin:1px 0 9px}.login-root{background:#f0e7db url("/static/img/login.png") no-repeat;position:absolute;min-height:100%;width:100%;overflow:hidden}.login-root .input-container{position:fixed;left:65%;top:33px;background:url("/static/img/loginbg.png") no-repeat center top}.login-root .input-container .input-root{width:370px;height:500px}.login-root .input-container .input-root .inputs-class{margin-top:220px;padding:10px 50px 10px 50px}.login-root .input-container .input-root .regist{margin-top:200px}.login-root .input-container .input-root .inputs-class .login-bottom{margin-top:10px;text-align:right}.login-root .input-container .input-root .input-group{display:table;border-collapse:separate}.login-root .input-container .input-root .inputs-class .input-class{height:32px;margin:18px 0;display:flex}
-.login-root .input-container .input-root .inputs-class .input-class input{flex:1;height:26px!important;padding:2px 14px;font-size:12px;line-height:1.5;border-radius:3px;border-top-left-radius:0;border-bottom-left-radius:0;display:table-cell;border:1px solid #ccc}.login-root .input-container .input-root .inputs-class .input-class .input-group-addon{color:#555;line-height:26px!important;font-size:12px;padding:2px 14px;line-height:1.5;border-radius:3px;display:table-cell;border:1px solid #ccc;border-right:0}.login-footer{position:absolute;bottom:0;left:0;width:100%;height:110px}.login-root{background:#f0e7db url("/static/img/login.png") no-repeat;position:absolute;min-height:100%;width:100%;overflow:hidden}.login-root .input-container{position:fixed;left:65%;top:33px;background:url("/static/img/loginbg.png") no-repeat center top}.login-root .input-container .input-root{width:370px;height:500px}.login-root .input-container .input-root p{font-size:21px;text-align:center;padding-top:195px}.login-root .input-container .input-root .inputs-class{padding:0 50px}.login-root .input-container .input-root .input-group{display:table;border-collapse:separate}.login-root .input-container .input-root .inputs-class .input-class{height:32px;margin:18px 0;display:flex}.login-root .input-container .input-root .inputs-class .input-class input{flex:1;height:26px!important;padding:2px 14px;font-size:12px;line-height:1.5;border-radius:3px;border-top-left-radius:0;border-bottom-left-radius:0;display:table-cell;border:1px solid #ccc}.login-root .input-container .input-root .inputs-class .input-class .input-group-addon{color:#555;line-height:26px!important;font-size:12px;padding:2px 14px;line-height:1.5;border-radius:3px;display:table-cell;border:1px solid #ccc;border-right:0}.login-footer{position:absolute;bottom:0;left:0;width:100%;height:110px}.me-menu{position:fixed;top:60px;left:20px;width:260px;height:100%;background-color:#f9f9f9}.me-menu p{cursor:pointer;font-size:15px;color:#555;margin:0;height:32px;line-height:32px}.me-menu .active{color:#3cbef8!important}.me-menu p a{margin-left:5px;color:#555;text-decoration:none}.me-menu .active span{display:inline-block;height:100%;width:2px;background-color:#3cbef8}.me-menu .active a{color:#3cbef8;vertical-align:top;height:32px;line-height:32px;display:inline-block}.me-blog-root{height:100%;margin:50px 4% 0 0}.me-blog-list{margin-left:300px}.me-blog-list p{height:30px;line-height:30px;margin:0;font-size:15px}.me-footer{position:absolute;bottom:0;left:0;width:100%;height:110px;padding:0 4%}.me-blog-footer{height:110px;padding:0 4%;margin-left:290px}.info-header{flex:1}.info-header span{margin-right:6px}.uinfo{color:#515a6e;margin:5px}.udesc span{margin-right:8px}.blog-list{display:flex;font-size:16px;min-height:35px;line-height:35px}.us-root{margin-top:50px;display:flex;margin-left:5%;font-size:16px;min-height:720px;height:100%}.us-root p{padding:5px 0;color:#323232}.us-root a{color:#28a3ef!important}.blog-title{display:flex;height:50px;line-height:50px}.blog-title input{padding-left:12px;flex:1;height:44px;border:0}.blog-title button{height:32px;color:#fff;margin-top:9px}.w-e-toolbar{height:40px;line-height:30px}.map-root{position:absolute;width:100%;height:100%;left:0;top:0}.map-root .map-container{width:100%;height:100%}.amap-logo,.amap-copyright{display:none!important;visibility:hidden!important}.blog-detaile p code{color:red;padding:2px 5px}.search-root{margin-top:50px}.search-root .input-class{display:table;border-collapse:separate}.search-root .input-class{width:50%;height:32px;margin:18px auto;display:flex}.search-root .input-class input{flex:1;height:36px!important;padding:2px 14px;font-size:12px;line-height:1.5;border-radius:3px;border-top-right-radius:0;border-bottom-right-radius:0;display:table-cell;border:1px solid #3385ff}.search-root .input-class .input-group-addon{color:#555;height:36px;line-height:36px!important;font-size:17px!important;font-size:12px;padding:2px 14px;line-height:36px;border-radius:3px;display:table-cell;background-color:#3385ff;border-top-left-radius:0;border-bottom-left-radius:0;color:#fff;border:1px solid #3385ff;border-left:none;cursor:pointer}.search-result{margin:35px 15%}.search-item{padding:7px 15px}.search-result a{display:block;cursor:pointer;height:25px;line-height:25px;font-size:16px;text-decoration:#00c6ff;flex:1}.search-result .search-title{display:flex}.search-result span{cursor:pointer;font-size:12px;height:25px;line-height:25px}.search-content{font-size:12px}
\ No newline at end of file
+html,body{font-size:14px !important;background:#fff;color:#353535;height:100%;width:100%;}#cnzz_stat_icon_1277992374{text-align:center;display:block;}#cnzz_stat_icon_1277992374 a{color:rgba(255,255,255,.7) !important;}a{text-decoration:none;}.layui-nav{text-align:right;}.navbar-default{border-color:#f8d9ea !important;}.img-circle-large{width:110px;height:110px;}.root-container{height:100%;width:100%;max-width:100%;}.nav-container{max-height:50px;position:fixed;width:100%;z-index:1000;left:0;top:0;}.nav-container li a:hover{transform:rotate(5deg) scale(1.1);}.nav-container p{display:inline-block;float:left;line-height:48px;font-size:20px;}::-webkit-scrollbar{width:1px;}::-webkit-scrollbar-track-piece{background-color:rgba(0,0,0,0);-webkit-border-radius:6px;}.cursor{cursor:pointer}.footer-root{color:rgba(255,255,255,.7);position:relative;width:100%;height:105px;display:flex;}.footer-friend{text-align:center;height:25px;line-height:25px;}.footer-friend a{color:rgba(255,255,255,.7);text-decoration:none;}.img-circle{width:31px;height:31px;border-radius:50%;}.login-footer .wxcode{margin-right:20px;}.layui-nav .layui-nav-item{line-height:49px !important;}.layui-nav .layui-nav-item a{height:49px !important;line-height:49px;}.layui-nav .layui-this:after,.layui-nav-bar,.layui-nav-tree .layui-nav-itemed:after{height:1px;}.footer-container{background-color:#393D49;padding:30px 5% 0 5%;}.pagination{margin:18px 0;}.pagination ul li{line-height:20px;width:20px;height:20px;display:inline-block;border-color:#28a3ef;font-size:16px;}.pagination ul li .next .prev{font-size:20px !important;}.pagination ul .active{background-color:#28a3ef;}.pagination ul .active a{color:#fff;}.breadcrumb-container{padding:20px;}.blog-root{width:68%;margin:40px auto;}.blog-root a{color:#28a3ef !important;}.blog-root .blog-title{display:block;margin:60px 0 20px 0;text-align:center}.blog-root .blog-detaile{color:#2f2f2f;}.blog-root .blog-detaile pre{border:1px #d2e8b9 solid;box-shadow:1px 1px 2px 2px #d2e8b9;margin:5px 0;}.blog-root .blog-detaile h4{font-size:20px;font-weight:500;}.blog-user{position:fixed;top:60px;left:5px;width:100px;height:100%;background-color:#f9f9f9;}.blog-info{padding:15px;}.blog-info .blog-author{display:flex;}.blog-info .blog-author .author-headimg{display:inline-block;width:48px;height:48px;}.blog-info .blog-author .blog-label{flex:1;height:22px;line-height:22px;text-align:right;padding-top:26px;}.blog-info .blog-author .blog-label label{color:#888;border:1px dotted #aaa;padding:5px;border-radius:5px;font-size:10px;}.blog-info .blog-author .author-headimg .img-circle{width:48px !important;height:48px !important;margin-top:0px !important;}.blog-info .blog-author .author-info{display:inline-block;height:48px !important;vertical-align:bottom;text-align:left;margin-left:5px;}.blog-info .blog-author .author-info a{display:inline-block;height:28px;line-height:28px;font-size:16px;}.blog-info .blog-author .author-info span{display:inline-block;height:20px;line-height:20px;font-size:12px;color:#888;padding-right:8px;}.blog-info em{padding:0 8px !important;}.comms-root{width:68%;margin:0 auto;}.comms-root a{text-decoration:none;}img{max-width:100% !important;}.blog-referral{width:100%;margin:40px auto;}.blog-referral p{padding:3px 0;}.layui-code-view .layui-code-ol li{margin-left:0px !important;}.home-container{height:100%;margin:50px 5% 60px 5%;}.home-container hr{margin:0;}.home-hearder{margin:10px 0;display:flex;height:30px;line-height:30px;}.home-hearder .m-select{color:#353535;width:150px;display:inline-block;height:32px;border-radius:3px;padding:4px 14px;}.home-hearder .layui-btn-group .active a{color:#fff;}.home-hearder .layui-btn-group a{color:#353535;text-decoration:none;}.nelson-btn{color:#ec6149 !important;border-radius:15px;border:1px solid #bbb !important;}.nelson-btn:hover{background:#fff !important;color:#ec6149 !important;border-radius:15px;border:1px solid #ec6149 !important;}.home-content{display:flex;min-height:36px;line-height:36px;}.home-content-title{display:inline-block;flex:1;}.home-content-desc{display:flex}.home-content-desc span{display:inline-block;text-align:center}.blog-root h5{color:#888;font-size:14px;margin:9px 0;font-family:inherit;font-weight:700;line-height:1.5;}.blog-root a{text-decoration:none;}.blog-root p{margin:1px 0 9px;}.login-root{background:#f0e7db url("/static/img/login.png") no-repeat;position:absolute;min-height:100%;width:100%;overflow:hidden;}.login-root .input-container{position:fixed;left:65%;top:33px;background:url("/static/img/loginbg.png") no-repeat center top;}.login-root .input-container .input-root{width:370px;height:500px;}.login-root .input-container .input-root .inputs-class{margin-top:220px;padding:10px 50px 10px 50px;}.login-root .input-container .input-root .regist{margin-top:200px;}.login-root .input-container .input-root .inputs-class .login-bottom{margin-top:10px;text-align:right;}.login-root .input-container .input-root .input-group{display:table;border-collapse:separate;}.login-root .input-container .input-root .inputs-class .input-class{height:32px;margin:18px 0;display:flex;}.login-root .input-container .input-root .inputs-class .input-class input{flex:1;height:26px !important;padding:2px 14px;font-size:12px;line-height:1.5;border-radius:3px;border-top-left-radius:0;border-bottom-left-radius:0;display:table-cell;border:1px solid #ccc;}.login-root .input-container .input-root .inputs-class .input-class .input-group-addon{color:#555;line-height:26px !important;font-size:12px;padding:2px 14px;line-height:1.5;border-radius:3px;display:table-cell;border:1px solid #ccc;border-right:none;}.login-footer{position:absolute;bottom:0;left:0;width:100%;height:110px;}.login-root{background:#f0e7db url("/static/img/login.png") no-repeat;position:absolute;min-height:100%;width:100%;overflow:hidden;}.login-root .input-container{position:fixed;left:65%;top:33px;background:url("/static/img/loginbg.png") no-repeat center top;}.login-root .input-container .input-root{width:370px;height:500px;}.login-root .input-container .input-root p{font-size:21px;text-align:center;padding-top:195px;}.login-root .input-container .input-root .inputs-class{padding:0 50px;}.login-root .input-container .input-root .input-group{display:table;border-collapse:separate;}.login-root .input-container .input-root .inputs-class .input-class{height:32px;margin:18px 0;display:flex;}.login-root .input-container .input-root .inputs-class .input-class input{flex:1;height:26px !important;padding:2px 14px;font-size:12px;line-height:1.5;border-radius:3px;border-top-left-radius:0;border-bottom-left-radius:0;display:table-cell;border:1px solid #ccc;}.login-root .input-container .input-root .inputs-class .input-class .input-group-addon{color:#555;line-height:26px !important;font-size:12px;padding:2px 14px;line-height:1.5;border-radius:3px;display:table-cell;border:1px solid #ccc;border-right:none;}.login-footer{position:absolute;bottom:0;left:0;width:100%;height:110px;}.me-menu{position:fixed;top:60px;left:20px;width:260px;height:100%;background-color:#f9f9f9;}.me-menu p{cursor:pointer;font-size:15px;color:#555;margin:0;height:32px;line-height:32px;}.me-menu .active{color:#3CBEF8 !important}.me-menu p a{margin-left:5px;color:#555;text-decoration:none;}.me-menu .active span{display:inline-block;height:100%;width:2px;background-color:#3CBEF8;}.me-menu .active a{color:#3CBEF8;vertical-align:top;height:32px;line-height:32px;display:inline-block;}.me-blog-root{height:100%;margin:50px 4% 0 0;}.me-blog-list{margin-left:300px;}.me-blog-list p{height:30px;line-height:30px;margin:0;font-size:15px;}.me-footer{position:absolute;bottom:0;left:0;width:100%;height:110px;padding:0 4%;}.me-blog-footer{height:110px;padding:0 4%;margin-left:290px;}.info-header{flex:1;}.info-header span{margin-right:6px;}.uinfo{color:#515a6e;margin:5px;}.udesc span{margin-right:8px;}.blog-list{display:flex;font-size:16px;min-height:35px;line-height:35px;}.us-root{margin-top:50px;display:flex;margin-left:5%;font-size:16px;min-height:720px;height:100%;}.us-root p{padding:5px 0;color:#323232;}.us-root a{color:#28a3ef !important;}.blog-title{display:flex;height:50px;line-height:50px;}.blog-title input{padding-left:12px;flex:1;height:44px;border:0;}.blog-title button{height:32px;color:#fff;margin-top:9px;}.w-e-toolbar{height:40px;line-height:30px;}.map-root{position:absolute;width:100%;height:100%;left:0;top:0;}.map-root .map-container{width:100%;height:100%;}.amap-logo,.amap-copyright{display:none !important;visibility:hidden !important;}.blog-detaile p code{color:red;padding:2px 5px;}.search-root{margin-top:50px;}.search-root  .input-class{display:table;border-collapse:separate;}.search-root .input-class{width:50%;height:32px;margin:18px auto;display:flex;}.search-root .input-class input{flex:1;height:36px !important;padding:2px 14px;font-size:12px;line-height:1.5;border-radius:3px;border-top-right-radius:0;border-bottom-right-radius:0;display:table-cell;border:1px solid #3385ff;}.search-root .input-class .input-group-addon{color:#555;height:36px;line-height:36px !important;font-size:17px !important;font-size:12px;padding:2px 14px;line-height:36px;border-radius:3px;display:table-cell;background-color:#3385ff;border-top-left-radius:0;border-bottom-left-radius:0;color:#fff;border:1px solid #3385ff;border-left:none;cursor:pointer;}.search-result{margin:35px 15%;}.search-item{padding:7px 15px;}.search-result a{display:block;cursor:pointer;height:25px;line-height:25px;font-size:16px;text-decoration:#00c6ff;flex:1;}.search-result .search-title{display:flex;}.search-result span{cursor:pointer;font-size:12px;height:25px;line-height:25px;}.search-content{font-size:12px;}.v-note-wrapper{height:100%;z-index:99 !important;}.modal_form{display:flex;margin-bottom:10px;}.modal_form .span-lable{display:inline-block;width:100px;height:30px;line-height:30px;}
\ No newline at end of file
diff --git a/views/editblog.html b/views/editblog.html
index 386dee2..c0aaf04 100644
--- a/views/editblog.html
+++ b/views/editblog.html
@@ -5,27 +5,10 @@
 <script src="/static/editor/mavon-editor.js"></script>
 <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
 </head>
-<style>
-    .modal_form{
-        display: flex;
-        margin-bottom: 10px;
-    }
-    .modal_form .span-lable{
-        display: inline-block;
-        width: 100px;
-        height: 30px;
-        line-height: 30px;
-    }
-</style>
 <body>
 <div class="root-container" id="vue-app">
     <div class="blog-title">
         <i-input type="text" v-model="blog.Title" placeholder="请输入文章标题"/>
-        <input type="text" id="blog-title" placeholder="请输入文章标题" value="{{.Blog.Title}}">
-        <button type="button" id="newBtn" class="layui-btn layui-btn-radius layui-btn-danger layui-btn-sm "
-                style="border-radius: 12px">
-            发布文章
-        </button>
     </div>
     <mavon-editor :externalLink="externalLink" :toolbars="toolbars" v-model="blog.BlogValue" @imgAdd="$imgAdd"
                   @save="saveHandler" @change="changeHandler" ref=md></mavon-editor>
@@ -35,7 +18,7 @@
             title="发布文章"
             :mask-closable="false">
         <div class="modal_form">
-            <span class="span-lable">开发语言：</span>
+            <span class="span-lable">文章分类：</span>
             <i-select v-model="blog.CategoryId" style="width:300px">
                 <i-option v-for="item in cats" :value="item.Id" :key="item.Id">${ item.Title }</i-option>
             </i-select>
@@ -47,7 +30,7 @@
             </i-button>
         </div>
         <div class="modal_form">
-            <span class="span-lable">开发语言：</span>
+            <span class="span-lable">添加标签：</span>
             <div style="display: inline-block;width: 241px">
                 <i-input type="text" v-model="lableTitle" placeholder="请输入标签名称"/>
             </div>
@@ -59,12 +42,6 @@
     </Modal>
 </div>
 </body>
-<style>
-    .v-note-wrapper {
-        height: 100%;
-        z-index: 99 !important;
-    }
-</style>
 <script>
     var app = new Vue({
         delimiters: ['${', '}'],
@@ -139,28 +116,44 @@
             if (!this.blog.BlogValue && this.blog.BlogHtml) {
                 this.blog.BlogValue = this.blog.BlogHtml
             }
-            this.lables = this.blog.Lables
             this.getCatas()
+            this.lables = this.blog.Lables
+            debugger
         },
         methods: {
             okHandler (){
+                if(!this.blog.CategoryId || this.blog.CategoryId==0){
+                    this.$Notice.warning({
+                        title: '文章分类必须选择',
+                    })
+                    return
+                }
+                var _this = this
                 this.loading = true
-                this.loading = false
+                var tobj = {}
+                tobj.id = this.blog.Id
+                tobj.title = this.blog.Title
+                tobj.blogHtml = this.blog.BlogHtml
+                var regex = /(<([^>]+)>)/ig
+                tobj.blogDesc = tobj.blogHtml.replace(regex,"").substring(0,200)
+                tobj.catory = this.blog.CategoryId
+                tobj.blogValue = this.blog.BlogValue
+                tobj.labels = []
+                this.lables.forEach(el=>{
+                    tobj.labels.push(el.Title)
+                })
                 $.post('/api/blog/edit', tobj,
                     function (data) {
+                        _this.loading = false
                         if (data.Status == 0) {
-                            storage.removeItem("blogHtml");
-                            storage.removeItem("blogTitle");
                             layer.msg("保存成功", {icon: 6});
-                            callback(true)
                             window.location.href = "/blog/{{.Blog.Id}}"
                         } else if (data.Status == 401) {
-                            window.location.href = "login"
+                            window.location.href = "/login"
                         } else if (data.Status == 500) {
                             layer.msg("保存失败", {icon: 6});
                             callback(false)
                         }
-
                     }, 'json')
             },
             addLable(){
@@ -185,7 +178,7 @@
                         if (data.Status == 0) {
                             _this.cats = data.Data
                         } else if (data.Status == 401) {
-                            window.location.href = "login"
+                            window.location.href = "/login"
                         } else if (data.Status == 500) {
                         }
 
@@ -228,16 +221,5 @@
             },
         }
     })
-
-    function saveBlog() {
-        layer.open({
-            type: 2,
-            title: '发布文章',
-            shadeClose: true,
-            shade: 0.8,
-            area: ['420px', '280px'],
-            content: '/iframe/blog.html?id={{.Blog.Id}}' //iframe的url
-        });
-    }
 </script>
 </html>
\ No newline at end of file
diff --git a/views/iframe/blog.html b/views/iframe/blog.html
deleted file mode 100644
index 0a00b72..0000000
--- a/views/iframe/blog.html
+++ /dev/null
@@ -1,102 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="码农随笔,个人随笔是一个面向IT技术人员,提供个人平时工作总结和在线记录学习笔记,个人技术博客,在线云笔记,码农笔录,最新的技术博客,www.aiprose.com">
-    <meta name="keywords"
-          content="码农随笔,个人随笔,博客,个人博客,个人笔记,技术博客,免费云笔记,云笔记,随笔,IT博客,谷歌地图,码农笔录,www.aiprose.com,aiprose.com,aiprose">
-    <link rel="stylesheet" href="//oss.aiprose.com/ali/sui/css/sui.min.css">
-    <script type="text/javascript" src="//oss.aiprose.com/ali/jquery/jquery.min.js"></script>
-    <script type="text/javascript" src="//oss.aiprose.com/ali/sui/js/sui.min.js"></script>
-    <title>发布博客 - 码农随笔</title>
-    <style>
-        .common {
-            margin: 10px 0;
-        }
-
-        .tag {
-            margin: 3px 0;
-        }
-    </style>
-</head>
-<body>
-<div style="margin: 5px 10px">
-    <div class="common">
-        <span>开发语言:</span>
-        <span>
-            <select class="form-control " style="width: 150px;display: inline-block;height: 32px" id="catory">
-            {{range .Cats}}
-                <option value="{{.Id}}">{{.Title}}</option>
-            {{end}}
-            </select>
-        </span>
-    </div>
-    <div class="common">
-        <span style="flex: 1;height: 30px;line-height: 30px;">文章标签:</span>
-        <div class="tag-group tag-removable" data-toggle='tag' id="labels">
-
-        </div>
-    </div>
-    <div class="common">
-        <span>添加标签:</span>
-        <input type="text" placeholder="输入标签" class="input-xfat" style="height: 26px;" id="lable">
-        <button type="button" class="btn btn-primary" style="height: 26px;margin-top: -5px;" id="addBtn">添加</button>
-    </div>
-    <div class="common" style="text-align: center">
-        <button type="button" class="btn btn-primary btn-xl" id="saveBtn">保存</button>
-        <button type="button" class="btn btn-warning btn-xl" id="cacelBtn">取消</button>
-    </div>
-</div>
-</body>
-<script>
-    $(function () {
-        if (parent.tobj.catory) {
-            $("#catory").val(parent.tobj.catory)
-        }
-        if (parent.tobj.labels) {
-            for (var i = 0; i < parent.tobj.labels.length; i++) {
-                var child = "<label class='tag tag-primary'>" + parent.tobj.labels[i] + "<a name='remove'><i class=\"iconfont icon-close\"></i></a> "
-                        + "<input type='checkbox' class='simple-tag' name='simple-tag-1' value='" + parent.tobj.labels[i] + "' checked='checked'/></label>"
-                $("#labels").append(child)
-            }
-        }
-
-        $("#addBtn").click(function () {
-            var temp = $("#lable").val()
-            if (temp.trim().length != 0) {
-                if ($("#labels").children().length > 5) {
-                    layer.msg('5个标签还不够', function () {
-                    });
-                    return
-                }
-                var child = "<label class='tag tag-primary'>" + temp + "<a name='remove'><i class=\"iconfont icon-close\"></i></a> "
-                        + "<input type='checkbox' class='simple-tag' name='simple-tag-1' value='" + temp + "' checked='checked'/></label>"
-                $("#labels").append(child)
-                $("#lable").val("")
-            }
-        })
-
-        $("#saveBtn").click(function () {
-            parent.tobj.catory = $("#catory").val()
-            var tarr = []
-            $.each($(".simple-tag"), function () {
-                tarr.push($(this).val())
-            });
-            parent.tobj.labels = tarr
-            console.log(tarr)
-            parent.saveBlogCallback(function (flag) {
-                if (flag) {
-                    var index = parent.layer.getFrameIndex(window.name);
-                    parent.layer.close(index);
-                }
-            })
-        })
-
-        $("#cacelBtn").click(function () {
-            var index = parent.layer.getFrameIndex(window.name);
-            parent.layer.close(index);
-        })
-    })
-</script>
-</html>
\ No newline at end of file
diff --git a/views/iframe/note.html b/views/iframe/note.html
deleted file mode 100644
index 245180b..0000000
--- a/views/iframe/note.html
+++ /dev/null
@@ -1,77 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="码农随笔,个人随笔是一个面向IT技术人员,提供个人平时工作总结和在线记录学习笔记,个人技术博客,在线云笔记,码农笔录,最新的技术博客,www.aiprose.com">
-    <meta name="keywords"
-          content="码农随笔,个人随笔,博客,个人博客,个人笔记,技术博客,免费云笔记,云笔记,随笔,IT博客,谷歌地图,码农笔录,www.aiprose.com,aiprose.com,aiprose">
-    <link rel="stylesheet" href="//oss.aiprose.com/ali/sui/css/sui.min.css">
-    <script type="text/javascript" src="//oss.aiprose.com/ali/jquery/jquery.min.js"></script>
-    <script type="text/javascript" src="//oss.aiprose.com/ali/sui/js/sui.min.js"></script>
-    <script type="text/javascript" src="/static/js/layer.js"></script>
-    <title>发布笔记 - 码农随笔</title>
-    <style>
-        .common {
-            margin: 15px 0;
-            display: flex;
-            height: 32px;
-            line-height: 32px;
-        }
-
-    </style>
-</head>
-<body>
-<div style="margin: 20px 35px;">
-    <div class="common">
-        <span>所属文件夹:</span>
-        <span style="flex: 1">
-            <select class="form-control " style="display: inline-block;height: 32px" id="catory">
-            {{range .NoteColl}}
-                <option value="{{.Id}}">{{.Title}}</option>
-            {{end}}
-            </select>
-        </span>
-    </div>
-    <div class="common">
-        <span>新笔记名称:</span>
-        <input type="text" placeholder="输入标签" class="input-xfat" style="height: 32px;flex: 1" id="lable">
-    </div>
-    <div class="common" style="text-align: center">
-        <button type="button" class="btn btn-primary btn-lg btn-block" id="saveBtn">保存</button>
-    </div>
-</div>
-</body>
-<script>
-    $(function () {
-
-        if (!{{.IsLogin}}) {
-            parent.location.href = "/login"
-            return
-        }else if ({{.NoteColl|len}} == 0) {
-            parent.location.href = "/me/note"
-        }
-        $("#saveBtn").click(function () {
-            var pid = $("#catory").val()
-            var title = $("#lable").val()
-            $.post('/api/note/save', {
-                        pid: pid,
-                        title: title
-                    },
-                    function (data) {
-                        if (!data.Status) {
-                            parent.addNoteCallback(data)
-                            parent.layer.msg("保存成功", {icon: 6});
-                            var index = parent.layer.getFrameIndex(window.name);
-                            parent.layer.close(index);
-                        } else if (data.Status == 401) {
-                            parent.location.href = "/login"
-                            parent.layer.close(index);
-                        } else {
-                            layer.msg("服务器异常", {icon: 5});
-                        }
-                    }, 'json')
-        })
-    })
-</script>
-</html>
\ No newline at end of file
diff --git a/views/newblog.html b/views/newblog.html
index 5ec6668..911f810 100644
--- a/views/newblog.html
+++ b/views/newblog.html
@@ -1,101 +1,227 @@
 {{template "header" .}}
 <meta name="keywords" content="码农随笔,个人随笔,博客,个人博客,个人笔记,技术博客,免费云笔记,云笔记,随笔,IT博客,谷歌地图,码农笔录,www.aiprose.com,aiprose.com,aiprose">
 <title>发布博客 - 码农随笔</title>
-<script src="/static/js/wangEditor.min.js"></script>
+<link rel="stylesheet" href="/static/editor/css/index.css">
+<script src="/static/editor/mavon-editor.js"></script>
+<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
 </head>
 <body>
-<div class="root-container">
+<div class="root-container" id="vue-app">
     <div class="blog-title">
-        <input type="text" id="blog-title" placeholder="请输入文章标题">
-        <button type="button" id="newBtn"  class="layui-btn layui-btn-radius layui-btn-danger layui-btn-sm " style="border-radius: 12px">
-            发布文章
-        </button>
+        <i-input type="text" v-model="blog.Title" placeholder="请输入文章标题"/>
     </div>
-    <div id="editor" class="editor">
+    <mavon-editor :externalLink="externalLink" :toolbars="toolbars" v-model="blog.BlogValue" @imgAdd="$imgAdd"
+                  @save="saveHandler" @change="changeHandler" ref=md></mavon-editor>
 
-    </div>
+    <Modal
+            v-model="showModal"
+            title="发布文章"
+            :mask-closable="false">
+        <div class="modal_form">
+            <span class="span-lable">文章分类：</span>
+            <i-select v-model="blog.CategoryId" style="width:300px">
+                <i-option v-for="item in cats" :value="item.Id" :key="item.Id">${ item.Title }</i-option>
+            </i-select>
+        </div>
+        <div class="modal_form">
+            <span class="span-lable">文章标签：</span>
+            <i-button type="primary" ghost size="small" v-for="item,index in lables" :key="index" style="margin-left: 5px">${item.Title}
+                <Icon type="ios-close-circle-outline" @click="delLabel(index)"/>
+            </i-button>
+        </div>
+        <div class="modal_form">
+            <span class="span-lable">添加标签：</span>
+            <div style="display: inline-block;width: 241px">
+                <i-input type="text" v-model="lableTitle" placeholder="请输入标签名称"/>
+            </div>
+            <i-button type="primary" ghost @click="addLable">添加</i-button>
+        </div>
+        <div slot="footer">
+            <i-button type="error" size="large" long :loading="loading" @click="okHandler">保存</i-button>
+        </div>
+    </Modal>
 </div>
 </body>
 <script>
-    var storage=window.localStorage
-    var E = window.wangEditor
-    var editor = new E('#editor')
-    editor.customConfig.uploadImgServer = '/file/upload'
-    // 或者 var editor = new E( document.getElementById('editor') )
-    editor.customConfig.uploadImgHooks = {
-        customInsert: function (insertImg, result, editor) {
-            insertImg(result.Data);
-
+    var app = new Vue({
+        delimiters: ['${', '}'],
+        el: '#vue-app',
+        components: {
+            'mavon-editor': MavonEditor.mavonEditor
+        },
+        data: {
+            loading: false,
+            lableTitle: '',
+            cats: [],
+            lables: [],
+            showModal: false,
+            blog: {
+                Title: '',
+                BlogValue: '',
+                BlogHtml: '',
+                CategoryId: 0
+            },
+            toolbars: {
+                bold: true, // 粗体
+                italic: true, // 斜体
+                header: true, // 标题
+                underline: true, // 下划线
+                strikethrough: true, // 中划线
+                mark: true, // 标记
+                superscript: true, // 上角标
+                subscript: true, // 下角标
+                quote: true, // 引用
+                ol: true, // 有序列表
+                ul: true, // 无序列表
+                link: true, // 链接
+                imagelink: true, // 图片链接
+                code: true, // code
+                table: true, // 表格
+                //fullscreen: true, // 全屏编辑
+                readmodel: true, // 沉浸式阅读
+                htmlcode: true, // 展示html源码
+                help: true, // 帮助
+                /* 1.3.5 */
+                undo: true, // 上一步
+                //redo: true, // 下一步
+                trash: true, // 清空
+                save: true, // 保存（触发events中的save事件）
+                /* 1.4.2 */
+                navigation: true, // 导航目录
+                /* 2.1.8 */
+                alignleft: true, // 左对齐
+                aligncenter: true, // 居中
+                alignright: true, // 右对齐
+                /* 2.2.1 */
+                subfield: true, // 单双栏模式
+                preview: true, // 预览
+                menu: true, // 预览
+            },
+            externalLink: {
+                // markdown_css: function() {
+                //     // 这是你的markdown css文件路径
+                //     return '/markdown/github-markdown.min.css';
+                // },
+                katex_css: function () {
+                    // 这是你的katex配色方案路径路径
+                    return '/katex/katex.min.css';
+                },
+                katex_js: function () {
+                    // 这是你的katex.js路径
+                    return '/katex/katex.min.js';
+                },
+            },
+        },
+        created() {
+            let item = window.localStorage.getItem("blogValue");
+            if(item){
+                this.blog.BlogValue = item
+            }
+            let itemTitle = window.localStorage.getItem("blogTilte");
+            if(itemTitle){
+                this.blog.Title = itemTitle
+            }
+            this.getCatas()
+        },
+        methods: {
+            okHandler (){
+                if(!this.blog.CategoryId || this.blog.CategoryId==0){
+                    this.$Notice.warning({
+                        title: '文章分类必须选择',
+                    })
+                    return
+                }
+                var _this = this
+                this.loading = true
+                var tobj = {}
+                tobj.title = this.blog.Title
+                window.localStorage.setItem("blogTilte",this.blog.Title);
+                tobj.blogHtml = this.blog.BlogHtml
+                var regex = /(<([^>]+)>)/ig
+                tobj.blogDesc = tobj.blogHtml.replace(regex,"").substring(0,200)
+                tobj.catory = this.blog.CategoryId
+                tobj.blogValue = this.blog.BlogValue
+                tobj.labels = []
+                this.lables.forEach(el=>{
+                    tobj.labels.push(el.Title)
+                })
+                $.post('/api/blog/new', tobj,
+                    function (data) {
+                        _this.loading = false
+                        if (data.Status == 0) {
+                            window.localStorage.removeItem("blogValue");
+                            window.localStorage.removeItem("blogTilte");
+                            layer.msg("保存成功", {icon: 6});
+                            window.location.href = "/blog/"+ data.Data
+                        } else if (data.Status == 401) {
+                            window.location.href = "/login"
+                        } else if (data.Status == 500) {
+                            layer.msg("保存失败", {icon: 6});
+                        }
+                    }, 'json')
+            },
+            addLable(){
+                if(!this.lableTitle){
+                    this.$Notice.warning({
+                        title: '请先输入标签名称',
+                    })
+                    return
+                }
+                var tobj = {}
+                tobj.Title = this.lableTitle
+                this.lables.push(tobj)
+                this.lableTitle = ''
+            },
+            delLabel(index){
+                this.lables.splice(index,1)
+            },
+            getCatas(){
+                var _this = this
+                $.get('/api/cats',
+                    function (data) {
+                        if (data.Status == 0) {
+                            _this.cats = data.Data
+                        } else if (data.Status == 401) {
+                            window.location.href = "/login"
+                        } else if (data.Status == 500) {
+                        }
+                    }, 'json')
+            },
+            $imgAdd(pos, $file) {
+                var _this = this
+                // 第一步.将图片上传到服务器.
+                var formdata = new FormData();
+                formdata.append('image', $file);
+                axios({
+                    url: '/file/upload',
+                    method: 'post',
+                    data: formdata,
+                    headers: {'Content-Type': 'multipart/form-data'},
+                }).then((resp) => {
+                    _this.$refs.md.$img2Url(pos, resp.data.Data);
+                })
+            },
+            changeHandler(value, render) {
+                this.blog.BlogValue = value
+                this.blog.BlogHtml = render
+                window.localStorage.setItem("blogValue",value);
+            },
+            saveHandler(value, render) {
+                if (this.blog.Title.trim().length < 3) {
+                    this.$Notice.warning({
+                        title: '文章标题最少三个字',
+                    })
+                    return
+                }
+                if (this.blog.BlogValue.trim().length == 0) {
+                    this.$Notice.warning({
+                        title: '文章内容不能为空哦',
+                    })
+                    return
+                }
+                this.showModal = true
+            },
         }
-    }
-    editor.create()
-    document.onkeydown = keyDown;
-
-    function keyDown(e) {
-        var currKey = 0, e = e || event || window.event;
-        currKey = e.keyCode || e.which || e.charCode;
-        if (currKey == 83 && (e.ctrlKey || e.metaKey)) {
-            saveBlog()
-            return
-        }
-
-    }
-    function saveBlog() {
-        var title = $("#blog-title").val();
-        if (title.trim().length < 3) {
-            layer.msg('文章标题最少三个字', function () {
-            });
-            return
-        }
-        tobj.title = $("#blog-title").val();
-        if (editor.txt.html().trim().length == 0) {
-            layer.msg('文章内容不能为空哦', function () {
-            });
-            return
-        }
-        tobj.blogHtml = editor.txt.html();
-        tobj.blogDesc = editor.txt.text().substring(0,200)
-        storage.setItem("blogHtml",tobj.blogHtml);
-        storage.setItem("blogTitle",tobj.title);
-        layer.open({
-            type: 2,
-            title: '发布文章',
-            shadeClose: true,
-            shade: 0.8,
-            area: ['420px', '280px'],
-            content: '/iframe/blog.html/' //iframe的url
-        });
-    }
-    var tobj = {}
-    $(function () {
-        var oldVal = storage.getItem("blogHtml");
-        editor.txt.html(oldVal);
-        var oldTitle = storage.getItem("blogTitle");
-        $("#blog-title").val(oldTitle);
-        var height = document.documentElement.clientHeight
-        $(".w-e-text-container").height(height - 50 - 40 - 1);
-        $("#newBtn").click(function () {
-            saveBlog()
-        })
     })
-
-    function saveBlogCallback(callback) {
-        $.post('/api/blog/new', tobj,
-                function (data) {
-                    if (data.Status == 0) {
-                        storage.removeItem("blogHtml");
-                        storage.removeItem("blogTitle");
-                        layer.msg("保存成功", {icon: 6});
-                        callback(true)
-                        window.location.href = "/blog/"+ data.Data
-                    } else if (data.Status == 401) {
-                        window.location.href = "login"
-                    } else if (data.Status == 500) {
-                        layer.msg("保存失败", {icon: 6});
-                        callback(false)
-                    }
-
-                }, 'json')
-    }
 </script>
 </html>
\ No newline at end of file