mirror of https://github.com/requarks/wiki
Nick
5 years ago
parent
04193dbc6f
commit
7634bd266d
@ -0,0 +1,187 @@
|
||||
<template lang='pug'>
|
||||
.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
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash'
|
||||
import { get, sync } from 'vuex-pathify'
|
||||
import DecoupledEditor from '@requarks/ckeditor5'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
save: {
|
||||
type: Function,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
editor: null,
|
||||
stats: {
|
||||
characters: 0,
|
||||
words: 0
|
||||
},
|
||||
content: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isMobile() {
|
||||
return this.$vuetify.breakpoint.smAndDown
|
||||
},
|
||||
locale: get('page/locale'),
|
||||
path: get('page/path'),
|
||||
activeModal: sync('editor/activeModal')
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
async mounted () {
|
||||
this.$store.set('editor/editorKey', 'ckeditor')
|
||||
|
||||
this.editor = await DecoupledEditor.create(this.$refs.editor, {
|
||||
placeholder: 'Type the page content here',
|
||||
wordCount: {
|
||||
onUpdate: stats => {
|
||||
this.stats = {
|
||||
characters: stats.characters,
|
||||
words: stats.words
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
this.$refs.toolbarContainer.appendChild(this.editor.ui.view.toolbar.element)
|
||||
|
||||
if (this.mode !== 'create') {
|
||||
this.editor.setData(this.$store.get('editor/content'))
|
||||
}
|
||||
|
||||
this.editor.model.document.on('change:data', _.debounce(evt => {
|
||||
this.$store.set('editor/content', this.editor.getData())
|
||||
}, 300))
|
||||
|
||||
this.$root.$on('editorInsert', opts => {
|
||||
console.info(opts)
|
||||
switch (opts.kind) {
|
||||
case 'IMAGE':
|
||||
this.editor.execute('imageInsert', {
|
||||
source: opts.path
|
||||
})
|
||||
break
|
||||
case 'BINARY':
|
||||
this.insertAtCursor({
|
||||
content: `[${opts.text}](${opts.path})`
|
||||
})
|
||||
break
|
||||
}
|
||||
})
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (this.editor) {
|
||||
this.editor.destroy()
|
||||
this.editor = null
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
$editor-height: calc(100vh - 64px - 24px);
|
||||
$editor-height-mobile: calc(100vh - 56px - 16px);
|
||||
|
||||
.editor-ckeditor {
|
||||
background-color: mc('grey', '200');
|
||||
flex: 1 1 50%;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
height: $editor-height;
|
||||
max-height: $editor-height;
|
||||
position: relative;
|
||||
|
||||
@at-root .theme--dark & {
|
||||
background-color: mc('grey', '900');
|
||||
}
|
||||
|
||||
@include until($tablet) {
|
||||
height: $editor-height-mobile;
|
||||
max-height: $editor-height-mobile;
|
||||
}
|
||||
|
||||
&-sysbar {
|
||||
padding-left: 0;
|
||||
|
||||
&-locale {
|
||||
background-color: rgba(255,255,255,.25);
|
||||
display:inline-flex;
|
||||
padding: 0 12px;
|
||||
height: 24px;
|
||||
width: 63px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.ck.ck-toolbar {
|
||||
border: none;
|
||||
justify-content: center;
|
||||
background-color: mc('grey', '300');
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
> .ck-editor__editable {
|
||||
background-color: mc('grey', '100');
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 0 5px hsla(0, 0, 0, .1);
|
||||
margin: 1rem auto 0;
|
||||
width: calc(100vw - 256px - 16vw);
|
||||
min-height: calc(100vh - 64px - 24px - 1rem - 40px);
|
||||
border-radius: 5px;
|
||||
|
||||
@at-root .theme--dark & {
|
||||
background-color: #303030;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
@include until($widescreen) {
|
||||
width: calc(100vw - 2rem);
|
||||
margin: 1rem 1rem 0 1rem;
|
||||
min-height: calc(100vh - 64px - 24px - 1rem - 40px);
|
||||
}
|
||||
|
||||
@include until($tablet) {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
min-height: calc(100vh - 56px - 24px - 76px);
|
||||
}
|
||||
|
||||
&.ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused {
|
||||
border-color: #FFF;
|
||||
box-shadow: 0 0 10px rgba(mc('blue', '700'), .25);
|
||||
|
||||
@at-root .theme--dark & {
|
||||
border-color: #444;
|
||||
border-bottom: none;
|
||||
box-shadow: 0 0 10px rgba(#000, .25);
|
||||
}
|
||||
}
|
||||
|
||||
&.ck .ck-editor__nested-editable.ck-editor__nested-editable_focused,
|
||||
&.ck .ck-editor__nested-editable:focus,
|
||||
.ck-widget.table td.ck-editor__nested-editable.ck-editor__nested-editable_focused,
|
||||
.ck-widget.table th.ck-editor__nested-editable.ck-editor__nested-editable_focused {
|
||||
background-color: mc('grey', '900');
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,6 @@
|
||||
key: ckeditor
|
||||
title: Visual Editor
|
||||
description: Rich-text WYSIWYG Editor
|
||||
contentType: html
|
||||
author: requarks.io
|
||||
props: {}
|
||||
Loading…
Reference in new issue