Adding font options to CKEditor 5 using Laravel/VueJS

Viewed 850

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.

0 Answers
Related