Я работал над добавлением редактора 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.