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 @@
+
+ .editor-ckeditor
+ div(ref='toolbarContainer')
+ div.contents(ref='editor')
+ v-system-bar.editor-ckeditor-sysbar(dark, status, color='grey darken-3')
+ .caption.editor-ckeditor-sysbar-locale {{locale.toUpperCase()}}
+ .caption.px-3 /{{path}}
+ template(v-if='$vuetify.breakpoint.mdAndUp')
+ v-spacer
+ .caption Visual Editor
+ v-spacer
+ .caption {{stats.characters}} Chars, {{stats.words}} Words
+
+
+
+
+
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')}}