vue.js搭建简单markdown编辑器
- html部分
<html>
<head>
<title>Notebooktitle>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js">script>
<script src="https://unpkg.com/marked">script>
<script src="https://unpkg.com/moment">script>
<div id="notebook">
<aside class="side-bar">
<div class="toolbar">
<button @click="addNote" :title="notes.length + ' note(s) already'"><i class="material-icons">addi>添加笔记button>
div>
<div class="notes">
<div class="note" v-for="note of sortedNotes" :class="{selected: note === selectedNote}" @click="selectNote(note)"><i class="icon material-icons" v-if="note.favorite">stari>{{note.title}}div>
div>
aside>
<template v-if="selectedNote">
<section class="main">
<div class="toolbar">
<input v-model="selectedNote.title" placeholder="Note title"/>
<button @click="favoriteNote" title="favorite note"><i class="material-icons">{{selectedNote.favorite?'star':'star_border'}}i>button>
<button @click="removeNote" title="Remove note"><i class="material-icons">deletei>button>
div>
<textarea v-model="selectedNote.content">textarea>
<div class="toolbar status-bar">
<span class="date">
<span class="label">创建时间span>
<span class="value">{{selectedNote.created|date}}span>
span>
div>
section>
<aside class="preview" v-html="notePreview">
aside>
template>
div>
<script src="script1.js">script>
body>
html>
- js部分
Vue.filter('date',time=>moment(time).format('DD/MM/YY,HH:mm'))
new Vue({
el:'#notebook',
data(){
return{
notes:JSON.parse(localStorage.getItem('notes')) || [],
selectedId:localStorage.getItem('selected-id')||null,
}
},
computed:{
selectedNote () {
return this.notes.find(note => note.id === this.selectedId)
},
notePreview () {
return this.selectedNote ? marked(this.selectedNote.content) : ''
},
sortedNotes(){
return this.notes.slice().sort((a,b)=>a.created-b.created).sort((a,b)=>(a.favorite===b.favorite)?0:a.favorite?-1:1)
},
},
watch:{
notes:{
handler:'saveNotes',
deep:true,
},
selectedId(val){
localStorage.setItem('selected-id',val)
},
},
methods:{
//添加笔记
addNote(){
const time=Date.now()
const note={
id:String(time),
title:'笔记'+(this.notes.length+1),
content:'使用**markdown**语法开始编辑笔记吧！',
created:time,
favorite:false,
}
this.notes.push(note)
this.selectNote(note)
},
selectNote(note){
this.selectedId=note.id
},
saveNotes(){
localStorage.setItem('notes',JSON.stringify(this.notes))
console.log('Notes saved!',new Date())
},
//删除笔记
removeNote(){
if(this.selectedNote&&confirm('Delete the note?')){
const index=this.notes.indexOf(this.selectedNote)
if(index!==-1){
this.notes.splice(index,1)
}
}
},
//收藏笔记
favoriteNote(){
this.selectedNote.favorite^=true
},
},
created(){
this.content=localStorage.getItem('content')||'You can write in ** markdown ** '
},
})
效果如下
3. 添加一些css进行排版
