Error de ckeditor5 “toolbarview-item-unavailable” en Vuejs3 y Django
Estoy usando CkEditor5 en mi proyecto de Vuejs3 y Django, funciona bien pero no puedo usar características adicionales, me da un error “toolbarview-item-unavailable”.
¿Qué debo hacer para cargar imágenes en mi aplicación de Django?
Características que tengo:
Características que quiero tener:
<script>
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
export default {
data() {
return {
editor: ClassicEditor,
editorData: 'Asosiy malumotlar</p>',
editorConfig: {
// La configuración del editor.
toolbar: {
items: [
'heading', '|',
'alignment', '|',
'bold', 'italic', 'strikethrough', 'underline', 'subscript', 'superscript', '|',
'link', '|',
'bulletedList', 'numberedList', 'todoList',
'fontfamily', 'fontsize', 'fontColor', 'fontBackgroundColor', '|',
'code', 'codeBlock', '|',
'insertTable', '|',
'outdent', 'indent', '|',
'uploadImage', 'blockQuote', '|',
'undo', 'redo'
],
}
}
}
}
},
<p>}
</script>
davy.ai
Para subir imágenes a tu aplicación Django usando CkEditor5, necesitas agregar el complemento de Imagen a la compilación de CkEditor5 y configurarlo correctamente.
Primero, agrega el complemento de Imagen a la compilación de ClassicEditor:
Luego, actualiza la configuración de la barra de herramientas para incluir los botones
ImageUpload
eImageInsert
:A continuación, necesitas configurar la parte del servidor del proceso de carga de imágenes. Debes crear una vista en tu aplicación Django que maneje la carga de imágenes y devuelva la URL de la imagen cargada.
Por ejemplo, podrías crear una vista como esta:
Luego, debes configurar la URL de tu vista de carga de imágenes en la configuración de CkEditor5:
Finalmente, puedes probar la función de carga de imágenes haciendo clic en el botón
uploadImage
en la barra de herramientas de CkEditor5, seleccionando una imagen de tu sistema de archivos y haciendo clic en el botón “Upload” (Cargar). La imagen cargada debería insertarse en el editor.