Markdown编辑器

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Markdown编辑器</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/pdone/static@latest/full/vue-js-markdown-editor/css/style.css"> <style> body { background: #e9e9e9 url(https://cdn.awaw.cc/raw/pdone/static/master/img/bg.jpg) !important; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } </style> </head> <body> <div id="app-wall" v-bind:class="{'full': isFull}" v-bind:style="{backgroundColor: actualSkin.wall}"> <div style="text-align:center;clear:both"> </div> <div id="app"> <header>新建文件.md <div class="buttons"></div> </header> <div class="editor"> <textarea class="code" autofocus="autofocus" v-model="code" v-bind:style="{color: actualSkin.color}"></textarea> <div class="result" v-html="compiledOutput"></div> <div class="settings" v-bind:class="{'active': isSettings}"> <h2>设置<i class="fa fa-window-close-o" @click="isSettings = false"></i></h2> <h3>主题</h3> <div class="skin" v-for="skin in skins" v-bind:class="{'active': skin.isActive}" v-bind:style="{background:skin.color}" @click="setSkin(skin)"></div> <h3>显示</h3><span class="toggleView" v-show="!isFull" @click="isFull = true"><i class="fa fa-window-maximize"></i>全屏</span><span class="toggleView" v-show="isFull" @click="isFull = false"><i class="fa fa-window-restore"></i>窗口化</span>  </div> </div> <footer v-bind:style="{background:actualSkin.background}">{{ appTitle }}<i class="fa fa-cog" v-bind:class="{'lookme': isSeen}" @click="showSettings"></i></footer> </div> </div> <script src='https://cdn.jsdelivr.net/gh/pdone/static@latest/full/vue-js-markdown-editor/js/vue.min.js'></script> <script src='https://cdn.jsdelivr.net/gh/pdone/static@latest/full/vue-js-markdown-editor/js/marked.min.js'></script> <script src="https://cdn.jsdelivr.net/gh/pdone/static@latest/full/vue-js-markdown-editor/js/index.js"></script> </body> </html>

CINXE.COM

Markdown编辑器