Добавление параметров шрифта в CKEditor 5 с помощью Laravel / VueJS - PullRequest
0 голосов
/ 05 марта 2020

Я работал над добавлением редактора wysiwyg, и после небольшого возни мне удалось заставить CKEditor 5 работать с Laravel 6 / VueJS. Однако, независимо от того, что я пытаюсь сделать, я не могу добавить параметры шрифта на панель инструментов. Я могу либо заставить редактор отображаться, но без параметров панели инструментов шрифта, либо я могу правильно настроить панель инструментов, но редактор не отображает.

В моем представлении Blade есть

<div class="form-group">
    <label for="body">Body</label>
    <wysiwyg></wysiwyg>
</div>

, и я Добавил следующие строки в мой resources/app.js файл (хотя последний, кажется, не имеет большого значения)

Vue.component('wysiwyg', require('./components/Wysiwyg').default);
Vue.use(CKEditor);

Мой компонент wysiwyg VueJS равен

<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 действительно отображает редактор, но как только я добавляю 'fontSize' в массив toolbar, я получаю сообщение об ошибке, указывающее, что запрошенный элемент панели инструментов недоступен. Я попытался добавить plugins: [ Font ] к своему editorConfig, но затем я получаю сообщение об ошибке, в котором говорится, что некоторые элементы CKEditor 5 дублированы.

Даже следуя подходу документации, выдает ту же ошибку "запрошенный элемент панели инструментов недоступен";

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

Честно говоря, я заблудился, как заставить его работать, на данный момент я больше готов попробовать другой редактор wysiwyg.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...