Editar descripción
Comprar curso

60. Editar descripción


1 comentarios

Inicia sesión para comentar

Comentarios:

  • Haroldo Miranda

    Haroldo Miranda hace 3 semanas

    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 3 semanas

      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 2 semanas

      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 1 día

      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