es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Error de ckeditor5 “toolbarview-item-unavailable” en Vuejs3 y Django

26 Jul, 2023 Programación

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:

Tengo estas características

Características que quiero tener:

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>
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    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:

    import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import Image from '@ckeditor/ckeditor5-image/src/image';

ClassicEditor.defaultConfig.plugins = [
   // otros complementos...
   Image
];

    Luego, actualiza la configuración de la barra de herramientas para incluir los botones ImageUpload e ImageInsert:

    toolbar: {
   items: [
      // otros botones...
      'uploadImage',
      'imageInsert'
   ]
},

    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:

    from django.views.decorators.csrf import csrf_exempt
from django.http import JsonResponse

@csrf_exempt
def upload_image(request):
   if request.method == 'POST':
      uploaded_file = request.FILES['upload']
      # guarda el archivo en el disco o en la nube
      # devuelve la URL de la imagen cargada
      return JsonResponse({'url': 'http://example.com/uploads/my-image.png'})
   else:
      return JsonResponse({'error': 'Solo se permite el método POST.'}, status=405)

    Luego, debes configurar la URL de tu vista de carga de imágenes en la configuración de CkEditor5:

    ImageUpload: {
   uploadUrl: '/upload-image/' // cambia esto por la URL de tu vista de carga de imágenes
}

    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.

Comments are closed.