Wednesday, 22 May 2019

CkEditor5 - Can't call method inside custom plugin and events not working

I'm trying to create a button in my CkEditor where the user clicks on it and a method from my Vue component is called, but I don't find in the documentation how to do it...

Also, my build is not emitting events... Any idea why?

<template>
    <div class="text-editor-container">
        <div ref="editor"></div>
    </div>
</template>

<script>
    import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'

    import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
    import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
    import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
    import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
    import Image from '@ckeditor/ckeditor5-image/src/image';

    import Plugin from '@ckeditor/ckeditor5-core/src/plugin'
    import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview'

    import imageIcon from '@ckeditor/ckeditor5-core/theme/icons/image.svg';

    class BtnAction extends Plugin {
        init() {
            const editor = this.editor

            editor.ui.componentFactory.add('btnAction', locale => {
                const view = new ButtonView(locale)

                view.set({
                    label: 'Insert image',
                    icon: imageIcon,
                    keystroke: 'CTRL+H',
                    tooltip: true
                })

                view.on('execute', () => {
                    // Call needsToBeCalled()
                })

                return view
            })
        }
    }

    import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';

    export default {
        name: 'CkEditor',
        props: ['placeholder', 'value'],
        data() {
            return {
                editor: null
            }
        },
        methods: {
            needsToBeCalled() {}
        },
        mounted() {
            this.editor = ClassicEditor
                .create(this.$refs.editor, {
                    plugins: [Essentials, Paragraph, Bold, Italic, Image, BtnAction, ImageCaption],
                    toolbar: ['bold', 'italic', 'btnAction']
                })
                .then(editor => {
                    console.log('Editor was initialized', editor);
                })
                .catch(error => {
                    console.error(error.stack);
                });
        }
    }
</script>

Thank u



from CkEditor5 - Can't call method inside custom plugin and events not working

No comments:

Post a Comment