Editar descripción
Comprar curso

60. Editar descripción

Tema anterior Siguiente tema

1 comentarios

Inicia sesión para comentar

Iniciar sesión

Comentarios:

  • Haroldo Miranda

    Haroldo Miranda hace 10 meses

    Estimado Víctor: me surgió un problema porque yo estoy utilizando Quill en vez de Ckeditor y aquí no he logrado resolver cómo funcionaría con el <x-textarea> del formulario. ¿cómo se haría en este caso? 

    De antemano muchas gracias. 

    • Victor Arana Flores hace 10 meses

      Hola amigo, no he usado Quill, por lo que no podría ayudarte. Pero si gustas te puedo pasar el plugin de ckeditor que uso en el curso. Me comentas

    • Haroldo Miranda hace 10 meses

      Agradecido, pero prefiero buscar la respuesta para poder utilizar Quill en producción o crear otra alternativa. Espero resolverlo. De todos modos, muchas gracias.

    • Leonel Lopez hace 9 meses

      Utilizando Quill (gratis) sin necesidad <x-textarea> en lugar de CkEditor (no es gratis, es de pago) 
      @if ($editDescription)
         <form wire:submit.prevent="saveDescription">
             <div
                 x-data
                 wire:ignore
                 x-init="
                     const toolbarOptions = [
                         ['bold', 'italic', 'underline', 'strike'],
                         ['blockquote', 'code-block'],
                         ['link', 'image', 'video', 'formula'],
                         [{ 'header': 1 }, { 'header': 2 }],
                         [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                         [{ 'script': 'sub' }, { 'script': 'super' }],
                         [{ 'indent': '-1' }, { 'indent': '+1' }],
                         [{ 'direction': 'rtl' }],
                         [{ 'size': ['small', false, 'large', 'huge'] }],
                         [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                         [{ 'color': [] }, { 'background': [] }],
                         [{ 'font': [] }],
                         [{ 'align': [] }],
                         ['clean']
                     ];

                     const quill = new Quill($refs.editor, {
                         modules: { toolbar: toolbarOptions },
                         theme: 'snow'
                     });

                     quill.root.innerHTML = @js($description);

                     quill.on('text-change', () => {
                         @this.set('description', quill.root.innerHTML);
                     });
                 "
             >
                 <div x-ref="editor" class="bg-white border rounded p-2 mb-2" style="min-height: 200px;"></div>
             </div>

             <div class="flex justify-end mt-4">
                 <x-button type="submit">Actualizar</x-button>
             </div>
         </form>
      @else
         <div class="text-gray-700 mb-2">
             {!! $lesson->description ?? 'Sin descripción' !!}
         </div>
         <x-button wire:click="$set('editDescription', true)" class="mt-2">
             <i class="fas fa-edit"></i> Editar Descripción
         </x-button>
      @endif