CkEditor5-无法在自定义插件中调用方法,并且事件不起作用

时间:2019-05-18 15:09:01

标签: javascript vue.js ckeditor5

我正在尝试在CkEditor中创建一个按钮,用户单击该按钮,然后调用Vue组件中的方法,但是我在文档中找不到如何执行此操作...

此外,我的构建没有发出事件...知道为什么吗?

<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>

谢谢你

0 个答案:

没有答案