1.0.18 • Published 5 years ago

ckeditor5-vuejs v1.0.18

Weekly downloads
4
License
MIT
Repository
github
Last release
5 years ago

==Install==

npm i --save ckeditor5-vuejs

==How to use: ==

<template>
    <ckeditor :config="editorConfig" v-model="post.content" @ready="onReady"></ckeditor>
</template>

<script>
import 'ckeditor5-vuejs/dist/ckeditor.css';
import {CKEditor, AutosavePlugin, MediaEmbedPlugin, UploaderPlugin} from 'ckeditor5-vuejs';

export default {
    data() {
        return {
            post: {
                content: ''
            },
            editorConfig: {
                toolbar: {
                    viewportTopOffset : 50,    //<-- height of fixed header
                    items: [
                        "heading", "|", "fontsize", "fontfamily", "|", "bold", "italic", "underline", "strikethrough", "highlight", "|", "alignment", "|", 
                        "numberedList", "bulletedList", "|", "link", "blockquote", "imageUpload", "insertTable", "mediaEmbed", "|", "undo", "redo",
                        'affBox', 'insertMedia', 'spinText',
                    ],
                },
                allowedContent: true,
                // extraAllowedContent: '*(*);*{*}',
                extraPlugins: null,
                autosave: {
                    waitingTime: 60000,
                    save: (editor) => {
                        this.autosave();
                    }
                },
            } 
        }
    }
    components: {
        ckeditor: CKEditor
    },

    created() {
        this.editorConfig.extraPlugins = [AutosavePlugin, UploaderPlugin(this.onUploadImage)];
    },

    methods: {
        async onUploadImage(loader, cancelSource) {
            // upload file
            return {source_url: 'https://uploaded_image_url'};
        },

        onReady( editor ) {
            // Insert the toolbar before the editable area.
            editor.ui.getEditableElement().parentElement.insertBefore(
                editor.ui.view.toolbar.element,
                editor.ui.getEditableElement()
            );
        },

        autosave() {
            (async () => {

            });
        }
    }
}
</script>
1.0.18

5 years ago

1.0.17

5 years ago

1.0.16

5 years ago

1.0.15

5 years ago

1.0.14

5 years ago

1.0.12

5 years ago

1.0.11

5 years ago

1.0.10

5 years ago

1.0.9

5 years ago

1.0.8

5 years ago

1.0.7

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago