I've been working on adding a wysiwyg editor, and after messing about a bit I managed to get CKEditor 5 somewhat working with Laravel 6/VueJS. However, no matter what I try to do, I can't seem to be able to add font options to the toolbar. I can either get the editor to render but without font toolbar options, or I can configure the toolbar correctly but the editor doesn't render.
My Blade view includes
<div class="form-group">
<label for="body">Body</label>
<wysiwyg></wysiwyg>
</div>
and I've added the following lines to my resources/app.js file (although the latter doesn't seem to matter much)
Vue.component('wysiwyg', require('./components/Wysiwyg').default);
Vue.use(CKEditor);
My wysiwyg VueJS component is
<template>
<div>
<input type="hidden" name="body" id="body" :value="this.data">
<ckeditor :editor="editor" v-model="data" :config="editorConfig"></ckeditor>
</div>
</template>
<script>
import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
export default {
props: ['article'],
components: {
ckeditor: CKEditor.component
},
data() {
return {
data: this.article !== undefined ? this.article.body : '',
editor: ClassicEditor,
editorConfig: {
toolbar: [
'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', '|', 'indent', 'outdent','|', 'blockQuote', 'insertTable', 'undo', 'redo'
]
}
}
}
}
</script>
This does render the editor, but as soon as I add 'fontSize' to the toolbar array, I get an error saying the requested toolbar item is unavailable. I tried adding plugins: [ Font ] to my editorConfig, but then I get an error saying some CKEditor 5 elements are duplicated.
Even following the documentation's approach yields the same "requested toolbar item is unavailable" error;
ClassicEditor.create(document.querySelector('#bodyEditor'), {
fontSize: {
options: [
9,
11,
13,
'default',
17,
19,
21
]
},
toolbar: [
'heading', 'bulletedList', 'numberedList', 'fontSize', 'undo', 'redo'
]
})
.then(editor => console.log(editor))
.catch(error => console.log(error));
I'm honestly lost on how to get it to work, at this point I'm more willing to try out a different wysiwyg editor altogether.