From 7634bd266dea475611f9ee036e57e3a70f7ed92d Mon Sep 17 00:00:00 2001 From: Nick Date: Sun, 8 Sep 2019 12:01:17 -0400 Subject: [PATCH] feat: ckeditor --- client/components/admin.vue | 2 +- client/components/editor.vue | 9 +- client/components/editor/editor-ckeditor.vue | 187 ++++++ client/components/editor/editor-markdown.vue | 7 + .../editor/editor-modal-editorselect.vue | 22 +- .../editor/editor-modal-properties.vue | 1 - .../editor/editor-modal-unsaved.vue | 8 +- client/scss/base/base.scss | 1 + client/store/editor.js | 1 + client/themes/default/scss/app.scss | 22 +- package.json | 57 +- server/modules/editor/ckeditor/definition.yml | 6 + yarn.lock | 595 +++++++++++------- 13 files changed, 647 insertions(+), 271 deletions(-) create mode 100644 client/components/editor/editor-ckeditor.vue create mode 100644 server/modules/editor/ckeditor/definition.yml diff --git a/client/components/admin.vue b/client/components/admin.vue index db96c151..359c311a 100644 --- a/client/components/admin.vue +++ b/client/components/admin.vue @@ -128,7 +128,7 @@ import { get, sync } from 'vuex-pathify' import statsQuery from 'gql/admin/dashboard/dashboard-query-stats.gql' -import adminStore from '@/store/admin' +import adminStore from '../store/admin' /* global WIKI */ diff --git a/client/components/editor.vue b/client/components/editor.vue index 5149590f..8cefed1e 100644 --- a/client/components/editor.vue +++ b/client/components/editor.vue @@ -51,7 +51,7 @@ import { Base64 } from 'js-base64' import createPageMutation from 'gql/editor/create.gql' import updatePageMutation from 'gql/editor/update.gql' -import editorStore from '@/store/editor' +import editorStore from '../store/editor' /* global WIKI */ @@ -62,6 +62,7 @@ export default { components: { AtomSpinner, editorCode: () => import(/* webpackChunkName: "editor-code", webpackMode: "lazy" */ './editor/editor-code.vue'), + editorCkeditor: () => import(/* webpackChunkName: "editor-ckeditor", webpackMode: "lazy" */ './editor/editor-ckeditor.vue'), editorMarkdown: () => import(/* webpackChunkName: "editor-markdown", webpackMode: "lazy" */ './editor/editor-markdown.vue'), editorWysiwyg: () => import(/* webpackChunkName: "editor-wysiwyg", webpackMode: "lazy" */ './editor/editor-wysiwyg.vue'), editorModalEditorselect: () => import(/* webpackChunkName: "editor", webpackMode: "eager" */ './editor/editor-modal-editorselect.vue'), @@ -153,7 +154,7 @@ export default { mounted() { this.$store.set('editor/mode', this.initMode || 'create') - this.initContentParsed = this.initContent ? Base64.decode(this.initContent) : '# Header\n\nYour content here' + this.initContentParsed = this.initContent ? Base64.decode(this.initContent) : '' this.$store.set('editor/content', this.initContentParsed) if (this.mode === 'create') { _.delay(() => { @@ -194,7 +195,7 @@ export default { variables: { content: this.$store.get('editor/content'), description: this.$store.get('page/description'), - editor: 'markdown', + editor: this.$store.get('editor/editorKey'), locale: this.$store.get('page/locale'), isPrivate: false, isPublished: this.$store.get('page/isPublished'), @@ -230,7 +231,7 @@ export default { id: this.$store.get('page/id'), content: this.$store.get('editor/content'), description: this.$store.get('page/description'), - editor: 'markdown', + editor: this.$store.get('editor/editorKey'), locale: this.$store.get('page/locale'), isPrivate: false, isPublished: this.$store.get('page/isPublished'), diff --git a/client/components/editor/editor-ckeditor.vue b/client/components/editor/editor-ckeditor.vue new file mode 100644 index 00000000..6ff852bb --- /dev/null +++ b/client/components/editor/editor-ckeditor.vue @@ -0,0 +1,187 @@ + + + + + diff --git a/client/components/editor/editor-markdown.vue b/client/components/editor/editor-markdown.vue index 4af97c8c..275e7099 100644 --- a/client/components/editor/editor-markdown.vue +++ b/client/components/editor/editor-markdown.vue @@ -296,6 +296,7 @@ export default { }, locale: get('page/locale'), path: get('page/path'), + mode: get('editor/mode'), activeModal: sync('editor/activeModal') }, methods: { @@ -456,6 +457,12 @@ export default { } }, mounted() { + this.$store.set('editor/editorKey', 'markdown') + + if (this.mode === 'create') { + this.$store.set('editor/content', '# Header\nYour content here') + } + // Initialize CodeMirror this.cm = CodeMirror.fromTextArea(this.$refs.cm, { diff --git a/client/components/editor/editor-modal-editorselect.vue b/client/components/editor/editor-modal-editorselect.vue index 020fe090..b906a247 100644 --- a/client/components/editor/editor-modal-editorselect.vue +++ b/client/components/editor/editor-modal-editorselect.vue @@ -48,17 +48,27 @@ img(src='/svg/icon-table.svg', alt='Tabular', style='width: 36px;') .body-2.grey--text.mt-2.text--darken-2 Tabular .caption.grey--text.text--darken-1 Excel-like + //- v-flex(xs4) + //- v-card.radius-7.grey( + //- hover + //- light + //- ripple + //- disabled + //- ) + //- v-card-text.text-center(@click='selectEditor("wysiwyg")') + //- img(src='/svg/icon-open-in-browser.svg', alt='Visual Builder', style='width: 36px;') + //- .body-2.mt-2.grey--text.text--darken-2 Visual Builder + //- .caption.grey--text.text--darken-1 Drag-n-drop v-flex(xs4) - v-card.radius-7.grey( + v-card.radius-7( hover light ripple - disabled ) - v-card-text.text-center(@click='selectEditor("wysiwyg")') - img(src='/svg/icon-open-in-browser.svg', alt='Visual Builder', style='width: 36px;') - .body-2.mt-2.grey--text.text--darken-2 Visual Builder - .caption.grey--text.text--darken-1 Drag-n-drop + v-card-text.text-center(@click='selectEditor("ckeditor")') + img(src='/svg/icon-open-in-browser.svg', alt='Visual Editor', style='width: 36px;') + .body-2.mt-2.primary--text Visual Editor + .caption.grey--text Rich-text WYSIWYG v-flex(xs4) v-card.radius-7.grey( hover diff --git a/client/components/editor/editor-modal-properties.vue b/client/components/editor/editor-modal-properties.vue index d0054728..8eb18d29 100644 --- a/client/components/editor/editor-modal-properties.vue +++ b/client/components/editor/editor-modal-properties.vue @@ -144,7 +144,6 @@ :close-on-content-click='false' v-model='isPublishEndShown' :return-value.sync='publishEndDate' - full-width width='460px' :disabled='!isPublished || true' ) diff --git a/client/components/editor/editor-modal-unsaved.vue b/client/components/editor/editor-modal-unsaved.vue index 1eb1512f..111f844f 100644 --- a/client/components/editor/editor-modal-unsaved.vue +++ b/client/components/editor/editor-modal-unsaved.vue @@ -2,14 +2,14 @@ v-dialog(v-model='isShown', max-width='550') v-card.wiki-form .dialog-header.is-short.is-red - v-icon.mr-2(color='white') warning + v-icon.mr-2(color='white') mdi-alert span {{$t('editor:unsaved.title')}} - v-card-text + v-card-text.pt-4 .body-2 {{$t('editor:unsaved.body')}} v-card-chin v-spacer - v-btn(flat, @click='isShown = false') {{$t('common:actions.cancel')}} - v-btn(color='red', @click='discard', dark) {{$t('common:actions.discardChanges')}} + v-btn(text, @click='isShown = false') {{$t('common:actions.cancel')}} + v-btn.px-4(color='red', @click='discard', dark) {{$t('common:actions.discardChanges')}}