nelson
/
beeblog
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

上传图片完成

vue
mail_yanpeng@163.com 5 years ago
parent
448a45af28
commit
25a315ab37
1 changed files with 131 additions and 69 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 192
      views/note.html

192
views/note.html
View File

@ -13,6 +13,7 @@
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.0/jquery.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>
<style>
html, body {
height: 100%;
@ -65,30 +66,45 @@
<Modal
v-model="modal1"
title="笔记信息"
:mask-closable="false"
@on-ok="okHandler"
@on-cancel="cancelHandler">
<i-form :label-width="100">
<form-item label="文件夹名称">
<i-select v-model="currentNote.pid">
<i-select v-model="currentNote.Pid">
<i-option v-for="item in noteCols" :value="item.id" :key="item.id">${ item.title }</i-option>
</i-select>
</form-item>
<form-item label="笔记名称">
<i-input type="text" v-model="currentNote.title" placeholder="请输入笔记名称"/>
<i-input type="text" v-model="currentNote.Title" placeholder="请输入笔记名称"/>
</form-item>
</i-form>
</Modal>
<mavon-editor :externalLink="externalLink" :toolbars="toolbars" v-model="meval" @save="saveHandler"></mavon-editor>
<Modal
v-model="modal2"
title="新增文件夹"
:mask-closable="false"
@on-ok="okColHandler">
<i-form :label-width="100">
<form-item label="文件夹名称">
<i-input type="text" v-model="colTitle" placeholder="请输入文件夹名称"/>
</form-item>
</i-form>
</Modal>
<mavon-editor :externalLink="externalLink" :toolbars="toolbars" v-model="meval" @imgAdd="$imgAdd" @save="saveHandler"
@change="changeHandler" ref=md></mavon-editor>
<Drawer title="目录选择" placement="left" :closable="false" v-model="drawer" width="400">
<i-button type="primary" ghost long>添加文件夹</i-button>
<i-button type="success" ghost long style="margin-top: 5px">添加笔记</i-button>
<i-button type="primary" ghost long @click="newNoteColHandler">新建文件夹</i-button>
<i-button type="success" ghost long style="margin-top: 5px" @click="newNoteHandler">新建笔记</i-button>
<i-menu theme="light" accordion="true" width="380" @on-select="noteSelectHandler">
<Submenu :name="item.Id" v-for="(item,key) in notes" :key="key">
<template slot="title">
<i class="ivu-icon ivu-icon-ios-paper"></i>
${item.Title}
</template>
<menu-item :name="note.Id" v-for="(note,nkey) in item.Notes" :key="nkey">${note.Title}</menu-item>
<menu-item :name="note.Id" v-for="(note,nkey) in item.Notes" :key="nkey">${note.Title}
<Icon type="md-trash" style="float: right" @click="delHandler(note.Id)"/>
</menu-item>
</Submenu>
</i-menu>
</Drawer>
@ -103,8 +119,10 @@
'mavon-editor': MavonEditor.mavonEditor
},
data: {
modal2: false,
modal1: false,
drawer: false,
colTitle: '',
externalLink: {
// markdown_css: function() {
// // 这是你的markdown css文件路径
@ -161,7 +179,69 @@
noteCols: []
},
mounted() {
mounted: function () {
var _this = this
var noteCahche = window.localStorage.getItem("note")
if (noteCahche) {
this.currentNote = JSON.parse(noteCahche)
this.meval = this.currentNote.NoteVal
}
this.getData()
// $vm.$emit('imgAdd', pos, $file);
this.$refs.md.$on("imgAdd",(pos, $file)=>{
_this.$imgAdd(pos, $file)
})
},
methods: {
$imgAdd(pos, $file){
debugger
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);
})
},
delHandler (id){
var _this = this
if(!id){
return
}
$.post('/api/note/del/' + id,
function (data) {
if (data.Status == 0) {
this.currentNote = {}
this.meval = ''
_this.getData()
_this.$Notice.success({
title: '删除成功',
desc: ''
})
} else if (data.Status == 401) {
window.location.href = "/login"
} else if (data.Status == 403) {
this.$Notice.warning({
title: '暂无权限',
desc: ''
})
} else {
_this.$Notice.error({
title: '删除失败',
desc: ''
})
}
}, 'json')
},
newNoteColHandler(){
this.modal2 = true
},
getData(){
var _this = this
$.get("/api/note", function (data, status) {
_this.notes = data
@ -170,17 +250,51 @@
})
})
},
methods: {
okColHandler() {
var _this = this
if(!this.colTitle){
return
}
$.post('/api/notecoll/save', {
title: this.colTitle
},
function (data) {
if (data.Status == 500) {
_this.$Notice.error({
title: '保存失败',
desc: ''
})
} else if (data.Status == 401) {
window.location.href = "/login"
} else {
_this.getData()
_this.$Notice.success({
title: '保存成功',
desc: ''
})
}
}, 'json')
},
changeHandler: function (value, render) {
this.currentNote.NoteVal = value
this.currentNote.NoteHtml = render
var jsonStr = JSON.stringify(this.currentNote);
window.localStorage.setItem("note", jsonStr)
},
newNoteHandler() {
this.currentNote = {}
this.meval = ''
},
okHandler() {
var _this = this
if (!this.currentNote.pid) {
if (!this.currentNote.Pid) {
this.$Notice.warning({
title: '请选择文件夹后重新保存',
desc: ''
})
return
}
if (!this.currentNote.title) {
if (!this.currentNote.Title) {
this.$Notice.warning({
title: '请输入笔记名称后重新保存',
desc: ''
@ -188,9 +302,9 @@
return
}
$.post('/api/note/save/', {
pid: this.currentNote.pid,
title: this.currentNote.title,
noteHtml: this.currentNote.NoteHtml
pid: this.currentNote.Pid,
title: this.currentNote.Title,
noteHtml: this.currentNote.NoteHtml,
noteVal: this.currentNote.NoteVal
},
function (data) {
@ -203,7 +317,6 @@
window.location.href = "/login"
} else {
_this.currentNote.Id = data.Id
debugger
_this.$Notice.success({
title: '保存成功',
desc: ''
@ -262,55 +375,4 @@
}
})
</script>
<script>
// function keyDown(e) {
// // e.preventDefault();
// var currKey = 0, e = e || event || window.event;
// currKey = e.keyCode || e.which || e.charCode;
// if (currKey == 83 && (e.ctrlKey || e.metaKey)) {
// layer.msg("ctrl+s")
// saveNote()
// return false;
// }
//
// }
$(function () {
$("#delNote").click(function () {
if (!note || !note.Id) {
layer.msg('请在右边菜单中选择笔记', function () {
});
return
}
layer.confirm('删除确认', {
btn: ['确认', '手滑了'] //按钮
}, function () {
$.post('/api/note/del/' + note.Id,
function (data) {
if (data.Status == 0) {
var subMenu = $(".sub-menu li a")
$.each(subMenu, function (index, el) {
if ($(el).attr("value") == note.Id) {
$(el).remove()
return
}
})
note = null
layer.msg("删除成功", {icon: 6});
} else if (data.Status == 401) {
window.location.href = "/login"
} else if (data.Status == 403) {
layer.msg("暂无权限", {icon: 5});
} else {
layer.msg("服务器异常", {icon: 5});
}
}, 'json')
}, function () {
});
})
})
</script>
</html>
Write Preview
Loading…
Cancel
Save