github
/
halo-admin
mirror of https://github.com/halo-dev/halo-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

Refactor post editor toolbars.

pull/9/head
ruibaby 2019-04-25 20:21:47 +08:00
parent a98566e4cd
commit 8f5db967e3
4 changed files with 90 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/core/const.js Normal file
View File

@ -0,0 +1,25 @@
const toolbars = {
bold: true, // 粗体
italic: true, // 斜体
header: true, // 标题
underline: true, // 下划线
strikethrough: true, // 中划线
quote: true, // 引用
ol: true, // 有序列表
ul: true, // 无序列表
link: true, // 链接
imagelink: true, // 图片链接
code: true, // code
table: true, // 表格
fullscreen: true, // 全屏编辑
readmodel: true, // 沉浸式阅读
htmlcode: true, // 展示html源码
undo: true, // 上一步
redo: true, // 下一步
trash: true, // 清空
navigation: true, // 导航目录
subfield: true, // 单双栏模式
preview: true // 预览
}
export { toolbars }

44
src/views/post/PostEdit.vue
View File

@ -116,6 +116,11 @@
:src="postToStage.thumbnail || 'https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png'"
@click="showThumbDrawer"
>
<a-button
class="post-thum-remove"
type="dashed"
@click="handlerRemoveThumb"
>移除</a-button>
</div>
</div>
</div>
@ -165,33 +170,11 @@ import AttachmentDrawer from '../attachment/components/AttachmentDrawer'
import AttachmentSelectDrawer from '../attachment/components/AttachmentSelectDrawer'
import FooterToolBar from '@/components/FooterToolbar'
import { mixin, mixinDevice } from '@/utils/mixin.js'
import { toolbars } from '@/core/const'
import 'mavon-editor/dist/css/index.css'
import tagApi from '@/api/tag'
import categoryApi from '@/api/category'
import postApi from '@/api/post'
const toolbars = {
bold: true, // 粗体
italic: true, // 斜体
header: true, // 标题
underline: true, // 下划线
strikethrough: true, // 中划线
quote: true, // 引用
ol: true, // 有序列表
ul: true, // 无序列表
link: true, // 链接
imagelink: true, // 图片链接
code: true, // code
table: true, // 表格
fullscreen: true, // 全屏编辑
readmodel: true, // 沉浸式阅读
htmlcode: true, // 展示html源码
undo: true, // 上一步
redo: true, // 下一步
trash: true, // 清空
navigation: true, // 导航目录
subfield: true, // 单双栏模式
preview: true // 预览
}
export default {
components: {
TagSelect,
@ -204,6 +187,7 @@ export default {
mixins: [mixin, mixinDevice],
data() {
return {
toolbars,
wrapperCol: {
xl: { span: 24 },
sm: { span: 24 },
@ -216,7 +200,6 @@ export default {
categories: [],
selectedCategoryIds: [],
selectedTagIds: [],
toolbars: toolbars,
postToStage: {}
}
},
@ -296,6 +279,9 @@ export default {
this.postToStage.status = 'DRAFT'
this.createOrUpdatePost()
},
handlerRemoveThumb() {
this.postToStage.thumbnail = null
},
onClose() {
this.visible = false
},
@ -307,14 +293,20 @@ export default {
}
</script>
<style scoped>
<style lang="less" scoped>
.v-note-wrapper {
z-index: 1000;
min-height: 580px;
}
.post-thum .img {
.post-thum {
.img {
width: 100%;
cursor: pointer;
border-radius: 4px;
}
.post-thum-remove {
margin-top: 16px;
}
}
</style>

58
src/views/sheet/SheetEdit.vue
View File

@ -89,6 +89,11 @@
:src="sheetToStage.thumbnail || 'https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png'"
@click="showThumbDrawer"
>
<a-button
class="sheet-thum-remove"
type="dashed"
@click="handlerRemoveThumb"
>移除</a-button>
</div>
</div>
</div>
@ -99,7 +104,7 @@
@listenToSelect="selectSheetThumb"
:drawerWidth="460"
/>
<div class="sheetControl">
<div class="bottom-control">
<a-button
style="marginRight: 8px"
@click="handleDraftClick"
@ -133,32 +138,10 @@ import AttachmentDrawer from '../attachment/components/AttachmentDrawer'
import AttachmentSelectDrawer from '../attachment/components/AttachmentSelectDrawer'
import FooterToolBar from '@/components/FooterToolbar'
import { mixin, mixinDevice } from '@/utils/mixin.js'
import { toolbars } from '@/core/const'
import 'mavon-editor/dist/css/index.css'
import sheetApi from '@/api/sheet'
import themeApi from '@/api/theme'
const toolbars = {
bold: true, // 粗体
italic: true, // 斜体
header: true, // 标题
underline: true, // 下划线
strikethrough: true, // 中划线
quote: true, // 引用
ol: true, // 有序列表
ul: true, // 无序列表
link: true, // 链接
imagelink: true, // 图片链接
code: true, // code
table: true, // 表格
fullscreen: true, // 全屏编辑
readmodel: true, // 沉浸式阅读
htmlcode: true, // 展示html源码
undo: true, // 上一步
redo: true, // 下一步
trash: true, // 清空
navigation: true, // 导航目录
subfield: true, // 单双栏模式
preview: true // 预览
}
export default {
components: {
mavonEditor,
@ -169,6 +152,7 @@ export default {
mixins: [mixin, mixinDevice],
data() {
return {
toolbars,
wrapperCol: {
xl: { span: 24 },
sm: { span: 24 },
@ -176,9 +160,7 @@ export default {
},
attachmentDrawerVisible: false,
thumDrawerVisible: false,
toolbars,
visible: false,
sheetUrl: 'hello-world',
customTpls: [],
sheetToStage: {}
}
@ -230,6 +212,9 @@ export default {
this.sheetToStage.status = 'DRAFT'
this.createOrUpdateSheet()
},
handlerRemoveThumb() {
this.sheetToStage.thumbnail = null
},
createOrUpdateSheet() {
if (this.sheetToStage.id) {
sheetApi.update(this.sheetToStage.id, this.sheetToStage).then(response => {
@ -254,25 +239,20 @@ export default {
}
}
</script>
<style scoped>
<style lang="less" scoped>
.v-note-wrapper {
z-index: 1000;
min-height: 580px;
}
.sheetControl {
position: absolute;
bottom: 0px;
.sheet-thum {
.img {
width: 100%;
border-top: 1px solid rgb(232, 232, 232);
padding: 10px 16px;
text-align: right;
left: 0px;
background: rgb(255, 255, 255);
border-radius: 0px 0px 4px 4px;
cursor: pointer;
border-radius: 4px;
}
.sheet-thum-remove {
margin-top: 16px;
}
.sheet-thum .img {
width: 100%;
}
</style>

10
src/views/system/ToolList.vue
View File

@ -7,7 +7,6 @@
:md="12"
:lg="8"
>
<div class="case">
<a-card
title="Markdown 导入"
:bordered="false"
@ -20,14 +19,12 @@
>导入</a-button>
<p>支持 Hexo/Jekyll 导入并解析元数据</p>
</a-card>
</div>
</a-col>
<a-col
:sm="24"
:md="12"
:lg="8"
>
<div class="case">
<a-card
title="WordPress 导入"
:bordered="false"
@ -40,7 +37,6 @@
>导入</a-button>
<p>尽请期待</p>
</a-card>
</div>
</a-col>
</a-row>
<a-modal
@ -97,10 +93,4 @@ export default {
</script>
<style scoped>
.card-content {
padding: 11px;
}
.case {
padding: 5px;
}
</style>