Implement EasyMDE input and preview

public/javascripts/a.js

@@ -15,6 +15,7 @@ modal = new Vue({
 	}
 })
 
+Vue.component('vue-easymde', VueEasyMDE.VueEasyMDE)
 
 app = new Vue({
 	el: '#app',
@@ -36,7 +37,7 @@ app = new Vue({
 	},
 	methods: {
 		getTempURL: function() {
-			$("#enurl").loading({
+			$('#enurl').loading({
 				message: '加载中...',
 				onStop: function(loading) {
 				    loading.overlay.fadeOut(650)
@@ -45,21 +46,21 @@ app = new Vue({
 			axios.post('/api/get-temp', {
 				text: app.text
 			}).then(function(response) {
-				$("#enurl").loading('stop');
+				$('#enurl').loading('stop');
 				var data = response.data;
 				if (data.status == 1) {
-					var newURL = window.location.protocol + "//" + window.location.host + window.location.pathname;
+					var newURL = window.location.protocol + '//' + window.location.host + window.location.pathname;
 					app.enurl = newURL + data.guid;
 				} else {
 					throw 'failure to get the tmp url!';
-					modal.show("操作失败！<br>", '错误')
+					modal.show('操作失败！<br>', '错误')
 				}
 				console.log(response);
 			}).catch(function(error) {
 				console.warn(error.response);
-				$("#enurl").loading('stop');
-				modal.show("操作失败！<br>" + error.response.data.message, '错误')
+				$('#enurl').loading('stop');
+				modal.show('操作失败！<br>' + error.response.data.message, '错误')
 			})
 		}
 	}
-})
+})

public/javascripts/view.js

@@ -1,3 +1,4 @@
+Vue.component('vue-easymde', VueEasyMDE.VueEasyMDE)
 // 查看消息需要用到的JS
 app = new Vue({
 	el: '#app',
@@ -17,6 +18,17 @@ app = new Vue({
 		}).catch(function (error) {
 			throw error;
 			alert('发生错误！')
-		});
-	}
+        });
+    },
+    watch: {
+        status(newVal) {
+            if (newVal !== 1) return;
+            // 获取成功，等待装载并设定编辑器状态
+            this.$nextTick(() => {
+                var easyMDE = this.$refs.preview.getMDEInstance();
+                easyMDE.togglePreview();
+                easyMDE.codemirror.setOption('readOnly', true);
+            });
+        },
+    },
 });

public/stylesheets/style.css

@@ -1,15 +1,15 @@
-body {padding-top: 73px; font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; }
+body { padding-top: 73px; font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; }
 
-.getbtn {margin-top: 16px; margin-bottom: 10px; padding: 8px 35px; }
+.getbtn { margin-top: -5px; margin-bottom: 10px; padding: 8px 35px; }
 
-pre {letter-spacing: 0.12em; white-space: pre-wrap; word-wrap: break-word; font-size: 1.05em; line-height: 1.6em; font-family: Georgia, Cambria, "Times New Roman", Times, serif;}
-footer a{ margin-right: 9px }
+pre { font-size: 1.05em; line-height: 1.6em; font-family: Georgia, Cambria, "Times New Roman", Times, serif;}
+footer a { margin-right: 9px }
 footer { margin-bottom: 10px; }
-#zhao {color: red; }
+#zhao { color: red; }
 
 p.tips{ line-height: 1.8em; }
 
-.maincontent{ min-height: 78vh }
+.maincontent { min-height: 78vh }
 
 .fade-enter-active, .fade-leave-active {
   transition: opacity .5s;
@@ -20,8 +20,8 @@ p.tips{ line-height: 1.8em; }
 
 #enurl:hover { transform: scale(1.01); }
 
-#tg.show {background: red; width: 100vh; opacity: 1; color: yellow; font-size: 10em; }
+#tg.show { background: red; width: 100vh; opacity: 1; color: yellow; font-size: 10em; }
 
-#tg {top: 1vw; left: 1vw; width: 1px; display: block; position: absolute; background: gray; transition: all 2s ease-in; opacity: 0; }
+#tg { top: 1vw; left: 1vw; width: 1px; display: block; position: absolute; background: gray; transition: all 2s ease-in; opacity: 0; }
 
-#enurl {transition: all .3s ease-in; margin: 3px 0; display: inline-block; color: #02B875; border: 1px solid; border-radius: .859em; padding: 8px 15px; margin-top: 9px; border-radius: .5; }
+#enurl { transition: all .3s ease-in; margin: 3px 0; display: inline-block; color: #02B875; border: 1px solid; border-radius: .859em; padding: 8px 15px; margin-top: 9px; border-radius: .5; }

views/index.pug

@@ -8,9 +8,9 @@ block content
                 | <br>然后点一下「去产生」按钮，你就会得到一个长的网址
                 | <br>将这个网址发给你的朋友，他只能看一次
                 | 内容就会 <b>永远消失</b>！ </p>
-                <textarea v-model='text' rows='6' class='form-control'></textarea>
-                <button v-on:click='getTempURL' class="btn btn-primary getbtn">去产生</button>
-                
+                <vue-easymde v-model='text' :options='{sideBySideFullscreen:false}'></vue-easymde>
+                <button :disabled='!text' v-on:click='getTempURL' class="btn btn-primary getbtn">去产生</button>
+
                 <transition name="fade">
                     <p v-if="enurl">
                         |可以把这个网址分享给你的朋友：
@@ -57,4 +57,7 @@ block content
           </div>
         </div>
     </div>
-        script(src='/javascripts/a.js')
+        link(rel='stylesheet', href='https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css')
+        script(src='https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js')
+        script(src='/javascripts/vue-easymde.umd.js')
+        script(src='/javascripts/a.js')

views/layout.pug

@@ -5,7 +5,7 @@ html
     link(rel='stylesheet', href='https://cdn.bootcss.com/bootswatch/4.0.0/litera/bootstrap.min.css')
     script(src='https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js')
     script(src='https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js')
-    script(src='/javascripts/vue.min.js')
+    script(src='https://cdn.jsdelivr.net/npm/vue@2')
     script(src='/javascripts/axios.min.js')
     script(src='/javascripts/jquery.loading.min.js')
 

views/look.pug

@@ -1,12 +1,12 @@
 extends layout
 block content
 	#app
-		<div v-if='status==1'>
-		pre {{ text }}
+		<div v-if='status==1' class='col-md-10 col-xs-12 col-sm-12'>
+		<vue-easymde ref="preview" :value='text' :options='{toolbar:["preview"]}'></vue-easymde>
 		</div>
 		<div v-else-if='status==0'>
 		h6 啊喔😯，你查看的内容已经不见了...
-		p.tips 
+		p.tips
 			| 这是因为这个网址已经被看过一次了，被看过一次的内容就会自动消失
 			| <br>对，这就是人们常说的 <b>阅后即焚！</b>
 		a(href="/") 我也要生成一个！
@@ -17,4 +17,7 @@ block content
 	//- 输出用于匹配GUID的正则表达式
 	script.
 		reg_guid =  !{locals.reg_guid};
-	script(src='/javascripts/view.js')
+	link(rel='stylesheet', href='https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css')
+	script(src='https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js')
+	script(src='/javascripts/vue-easymde.umd.js')
+	script(src='/javascripts/view.js')