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