refactor: the way to select images for post editing (#421)

Signed-off-by: Ryan Wang <i@ryanc.cc>
pull/423/head
Ryan Wang 2022-01-25 17:18:19 +08:00 committed by GitHub
parent ae6968d561
commit 70c95b3974
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 34 additions and 38 deletions

View File

@ -31,7 +31,7 @@
"filepond": "^4.30.3", "filepond": "^4.30.3",
"filepond-plugin-file-validate-type": "^1.2.6", "filepond-plugin-file-validate-type": "^1.2.6",
"filepond-plugin-image-preview": "^4.6.10", "filepond-plugin-image-preview": "^4.6.10",
"halo-editor": "^2.8.3", "halo-editor": "^2.8.4",
"marked": "^4.0.10", "marked": "^4.0.10",
"md5.js": "^1.3.5", "md5.js": "^1.3.5",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",

View File

@ -22,7 +22,7 @@ specifiers:
filepond: ^4.30.3 filepond: ^4.30.3
filepond-plugin-file-validate-type: ^1.2.6 filepond-plugin-file-validate-type: ^1.2.6
filepond-plugin-image-preview: ^4.6.10 filepond-plugin-image-preview: ^4.6.10
halo-editor: ^2.8.3 halo-editor: ^2.8.4
husky: ^6.0.0 husky: ^6.0.0
less: ^3.13.1 less: ^3.13.1
less-loader: ^5.0.0 less-loader: ^5.0.0
@ -57,7 +57,7 @@ dependencies:
filepond: 4.30.3 filepond: 4.30.3
filepond-plugin-file-validate-type: 1.2.6_filepond@4.30.3 filepond-plugin-file-validate-type: 1.2.6_filepond@4.30.3
filepond-plugin-image-preview: 4.6.10_filepond@4.30.3 filepond-plugin-image-preview: 4.6.10_filepond@4.30.3
halo-editor: 2.8.3 halo-editor: 2.8.4
marked: 4.0.10 marked: 4.0.10
md5.js: 1.3.5 md5.js: 1.3.5
nprogress: 0.2.0 nprogress: 0.2.0
@ -4317,6 +4317,10 @@ packages:
engines: {node: '>=10'} engines: {node: '>=10'}
dev: true dev: true
/github-markdown-css/4.0.0:
resolution: {integrity: sha512-mH0bcIKv4XAN0mQVokfTdKo2OD5K8WJE9+lbMdM32/q0Ie5tXgVN/2o+zvToRMxSTUuiTRcLg5hzkFfOyBYreg==}
dev: false
/glob-parent/5.1.2: /glob-parent/5.1.2:
resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==} resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
engines: {node: '>= 6'} engines: {node: '>= 6'}
@ -4387,9 +4391,10 @@ packages:
duplexer: 0.1.2 duplexer: 0.1.2
dev: true dev: true
/halo-editor/2.8.3: /halo-editor/2.8.4:
resolution: {integrity: sha512-5vzJdCJxuNNQl0qMgkjuEMXMdRoBLhMjl8NloPof/W7EFYvfoEp/vD8h2JzwXkDEugHM19SDmO5QNyH6oyr8rQ==} resolution: {integrity: sha512-uRE3zRGgP9HujeU1dbIcGIDNHF2FJMvnuUGAnJx3wFXtqEEAzq+QK/zHqhngsOQa09AS0OJMYfDfWsjASqYXjg==}
dependencies: dependencies:
github-markdown-css: 4.0.0
highlight.js: 9.18.5 highlight.js: 9.18.5
highlight.js-async-webpack: 1.0.4 highlight.js-async-webpack: 1.0.4
dev: false dev: false

View File

@ -1,14 +1,19 @@
<template> <template>
<halo-editor <div class="h-full">
ref="md" <halo-editor
v-model="originalContentData" ref="md"
:boxShadow="false" v-model="originalContentData"
:ishljs="true" :boxShadow="false"
:toolbars="toolbars" :ishljs="true"
autofocus :toolbars="toolbars"
@imgAdd="handleAttachmentUpload" autofocus
@save="handleSaveDraft" @imgAdd="handleAttachmentUpload"
/> @openImagePicker="attachmentSelectVisible = true"
@save="handleSaveDraft"
/>
<AttachmentSelectModal :visible.sync="attachmentSelectVisible" @confirm="handleSelectAttachment" />
</div>
</template> </template>
<script> <script>
import { toolbars } from '@/core/const' import { toolbars } from '@/core/const'
@ -31,7 +36,8 @@ export default {
data() { data() {
return { return {
toolbars, toolbars,
originalContentData: '' originalContentData: '',
attachmentSelectVisible: false
} }
}, },
watch: { watch: {
@ -53,6 +59,13 @@ export default {
this.$log.error('update image error: ', e) this.$log.error('update image error: ', e)
} }
}, },
handleSelectAttachment({ markdown }) {
this.$refs.md.insertText(this.$refs.md.getTextareaDom(), {
prefix: '',
subfix: '',
str: markdown.join('\n')
})
},
handleSaveDraft() { handleSaveDraft() {
this.$emit('onSaveDraft') this.$emit('onSaveDraft')
} }

View File

@ -14,7 +14,6 @@
></ReactiveButton> ></ReactiveButton>
<a-button :loading="previewSaving" @click="handlePreview"></a-button> <a-button :loading="previewSaving" @click="handlePreview"></a-button>
<a-button type="primary" @click="postSettingVisible = true">发布</a-button> <a-button type="primary" @click="postSettingVisible = true">发布</a-button>
<a-button type="dashed" @click="attachmentSelectVisible = true">附件库</a-button>
</a-space> </a-space>
</template> </template>
<a-row :gutter="12"> <a-row :gutter="12">
@ -38,8 +37,6 @@
:visible.sync="postSettingVisible" :visible.sync="postSettingVisible"
@onUpdate="onUpdateFromSetting" @onUpdate="onUpdateFromSetting"
/> />
<AttachmentSelectModal :visible.sync="attachmentSelectVisible" @confirm="handleSelectAttachment" />
</page-view> </page-view>
</template> </template>
@ -63,7 +60,6 @@ export default {
}, },
data() { data() {
return { return {
attachmentSelectVisible: false,
postSettingVisible: false, postSettingVisible: false,
postToStage: {}, postToStage: {},
contentChanges: 0, contentChanges: 0,
@ -212,13 +208,6 @@ export default {
}) })
} }
}, },
handleSelectAttachment({ markdown }) {
this.$set(
this.postToStage,
'originalContent',
(this.postToStage.originalContent || '') + '\n' + markdown.join(`\n`)
)
},
handleRestoreSavedStatus() { handleRestoreSavedStatus() {
this.contentChanges = 0 this.contentChanges = 0
}, },

View File

@ -14,7 +14,6 @@
></ReactiveButton> ></ReactiveButton>
<a-button :loading="previewSaving" @click="handlePreview"></a-button> <a-button :loading="previewSaving" @click="handlePreview"></a-button>
<a-button type="primary" @click="sheetSettingVisible = true">发布</a-button> <a-button type="primary" @click="sheetSettingVisible = true">发布</a-button>
<a-button type="dashed" @click="attachmentSelectVisible = true">附件库</a-button>
</a-space> </a-space>
</template> </template>
<a-row :gutter="12"> <a-row :gutter="12">
@ -39,8 +38,6 @@
:visible.sync="sheetSettingVisible" :visible.sync="sheetSettingVisible"
@onUpdate="onUpdateFromSetting" @onUpdate="onUpdateFromSetting"
/> />
<AttachmentSelectModal :visible.sync="attachmentSelectVisible" @confirm="handleSelectAttachment" />
</page-view> </page-view>
</template> </template>
@ -61,7 +58,6 @@ export default {
mixins: [mixin, mixinDevice, mixinPostEdit], mixins: [mixin, mixinDevice, mixinPostEdit],
data() { data() {
return { return {
attachmentSelectVisible: false,
sheetSettingVisible: false, sheetSettingVisible: false,
sheetToStage: {}, sheetToStage: {},
contentChanges: 0, contentChanges: 0,
@ -207,13 +203,6 @@ export default {
}) })
} }
}, },
handleSelectAttachment({ markdown }) {
this.$set(
this.sheetToStage,
'originalContent',
(this.sheetToStage.originalContent || '') + '\n' + markdown.join(`\n`)
)
},
handleRestoreSavedStatus() { handleRestoreSavedStatus() {
this.contentChanges = 0 this.contentChanges = 0
}, },