diff options
Diffstat (limited to 'front-end/src')
-rw-r--r-- | front-end/src/views/Blog/ckeditor/build.ts | 11 | ||||
-rw-r--r-- | front-end/src/views/Blog/components/Content.vue | 29 | ||||
-rw-r--r-- | front-end/src/views/Blog/index.vue | 19 |
3 files changed, 49 insertions, 10 deletions
diff --git a/front-end/src/views/Blog/ckeditor/build.ts b/front-end/src/views/Blog/ckeditor/build.ts index 83b46a7..fe3e0b9 100644 --- a/front-end/src/views/Blog/ckeditor/build.ts +++ b/front-end/src/views/Blog/ckeditor/build.ts @@ -38,7 +38,7 @@ export const config = { ] }, // https://ckeditor.com/docs/ckeditor5/latest/features/editor-placeholder.html#using-the-editor-configuration - placeholder: 'Welcome to CKEditor 5!', + placeholder: 'Edit CMNext post content using CKEditor 5 ', // https://ckeditor.com/docs/ckeditor5/latest/features/font.html#configuring-the-font-family-feature fontFamily: { options: [ @@ -120,6 +120,13 @@ export const config = { 'WProofreader', // Careful, with the Mathtype plugin CKEditor will not load when loading this sample // from a local file system (file://) - load this site via HTTP server if you enable MathType - 'MathType' + 'MathType', + 'DocumentOutline', + 'PasteFromOfficeEnhanced', + 'Template', + 'SlashCommand', + 'AIAssistant', + 'FormatPainter', + 'TableOfContents' ], }
\ No newline at end of file diff --git a/front-end/src/views/Blog/components/Content.vue b/front-end/src/views/Blog/components/Content.vue index ae0f6cf..ba78773 100644 --- a/front-end/src/views/Blog/components/Content.vue +++ b/front-end/src/views/Blog/components/Content.vue @@ -9,6 +9,22 @@ /> </template> <template #editor> + <div v-if="showProgress" class="max-w-xl mx-auto"> + <span id="ProgressLabel" class="sr-only">Loading</span> + + <span + role="progressbar" + aria-labelledby="ProgressLabel" + :aria-valuenow="progress" + class="relative block bg-gray-200 rounded-full dark:bg-dark-500" + > + <span class="absolute inset-0 flex items-center justify-center text-[10px]/4"> + <span class="font-bold text-white "> {{ loadingProgress }} </span> + </span> + + <span class="block h-4 text-center rounded-full bg-primary-600" :style="progressWidth"></span> + </span> + </div> <ContentEditor :blog="$props.blog" @submit="onSubmit" @@ -21,22 +37,24 @@ </template> <script setup lang="ts"> -import { computed } from 'vue'; +import { computed, toRefs } from 'vue'; import { BlogState } from '../blog-api'; import { isEmpty } from 'lodash-es'; import { apiCall } from '@vnuge/vnlib.browser'; +import { useClipboard } from '@vueuse/core'; +import { ContentMeta, useFilteredPages } from '@vnuge/cmnext-admin'; import EditorTable from './EditorTable.vue'; import ContentEditor from './Content/ContentEditor.vue'; import ContentTable from './Content/ContentTable.vue'; -import { useClipboard } from '@vueuse/core'; -import { ContentMeta, useFilteredPages } from '@vnuge/cmnext-admin'; const emit = defineEmits(['reload']) const props = defineProps<{ - blog: BlogState + blog: BlogState, + progress: number }>() +const { progress } = toRefs(props) //Get the computed content const { selectedId, @@ -51,6 +69,9 @@ const { selectedId, const { items, pagination } = useFilteredPages(props.blog.content, 15) const showEdit = computed(() => !isEmpty(selectedId.value)); +const loadingProgress = computed(() => `${progress?.value}%`); +const progressWidth = computed(() => ({ width: `${progress?.value}%` })); +const showProgress = computed(() => progress?.value > 0 && progress?.value < 100); const openEdit = async (item: ContentMeta) => selectedId.value = item.id diff --git a/front-end/src/views/Blog/index.vue b/front-end/src/views/Blog/index.vue index e862d32..ea35ad6 100644 --- a/front-end/src/views/Blog/index.vue +++ b/front-end/src/views/Blog/index.vue @@ -98,7 +98,7 @@ </TabPanel> <TabPanel> - <Content :blog="blogState" /> + <Content :progress="progress" :blog="blogState" /> </TabPanel> </TabPanels> @@ -108,9 +108,10 @@ </template> <script setup lang="ts"> -import { computed } from 'vue'; +import { computed, ref } from 'vue'; import { useScriptTag } from '@vueuse/core'; import { useRouteQuery } from '@vueuse/router'; +import { AxiosProgressEvent } from 'axios'; import { TabGroup, TabList, Tab, TabPanels, TabPanel, Switch } from '@headlessui/vue' import { first } from 'lodash-es'; import { useRoute, useRouter } from 'vue-router'; @@ -127,12 +128,13 @@ useTitle('CMNext Admin') if(!window.CKEDITOR){ //Load scripts - const ckEditorTag = useScriptTag("https://cdn.ckeditor.com/ckeditor5/35.4.0/super-build/ckeditor.js") + const ckEditorTag = useScriptTag("https://cdn.ckeditor.com/ckeditor5/40.0.0/super-build/ckeditor.js") //Store the wait result on the window for the editor script to wait window.editorLoadResult = ckEditorTag.load(true); } const { userName, getProfile } = useUser() +const progress = ref<number>(0) //Load user profile and forget if not set if(!userName.value){ @@ -143,10 +145,19 @@ const firstLetter = computed(() => first(userName.value)) const tabIdQ = useRouteQuery<string>('tabid', '', { mode: 'push' }) +const axios = useAxios({ + onUploadProgress: (e:AxiosProgressEvent) => { + progress.value = Math.round((e.loaded * 100) / e.total!) + }, + //Set to 60 second timeout + timeout:60 * 1000 +}) + + const context = createBlogContext({ + axios, route: useRoute(), router: useRouter(), - axios: useAxios(null), channelUrl: '/blog/channels', postUrl: '/blog/posts', contentUrl: '/blog/content' |