jeroennoten / Laravel-AdminLTE

Easy AdminLTE integration with Laravel
MIT License
3.82k stars 1.08k forks source link

[BUG]: Problem with Summernote plugin and the codeview #1221

Closed Nemachtilli closed 11 months ago

Nemachtilli commented 1 year ago

Describe the bug

summernote does not save or display what you write in codeview

Steps To Reproduce

Steps to reproduce the behavior:

  1. I write the code for an iframe of a YouTube video within the codeview.
  2. I click to exit codeview
  3. whatever you typed in codeview is not saved or displayed
  4. I click submit to save the record and checked the database and nothing is saved

Expected behavior

I expect the video iframe to display but it does not save or display, I am using the package puglin

Environment

This happens locally and in production.

Item Version
Laravel 9
Project jeroennoten/laravel-adminlte": "^3.8
OS Linux

Additional context

I have the plugin installed in my project

php artisan adminlte:plugins install --plugin=summernote

add in my view @section('plugins.Summernote', true)

add in config adminlte.php

'Summernote' => [
        'active' => false,
        'files' => [
            [
                'type' => 'js',
                'asset' => true,
                'location' => 'vendor/summernote/summernote-bs4.min.js',
            ],
            [
                'type' => 'css',
                'asset' => true,
                'location' => 'vendor/summernote/summernote-bs4.min.css',
            ],
        ],
    ],

Download the summernote.min.js file from the following link:

https://summernote.org/getting-started/

Add the file to my view and it worked

Why does this happen?

dfsmania commented 1 year ago

Hi @Nemachtilli , I have tested this in my local environment with the next markup on the codeview and it's working fine:

<p><strong>Hello</strong><br>World</p>

I suggest:

  1. Try looking for errors on the browser's console. Hopefully, maybe there is an error that may be investigated.

  2. If problem persist, you may try testing the plugin with CDN files instead of the locally installed ones. It may be a version problem of the plugin files. For example:

'Summernote' => [
        'active' => false,
        'files' => [
            [
                'type' => 'js',
                'asset' => false,
                'location' => 'https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js',
            ],
            [
                'type' => 'css',
                'asset' => false,
                'location' => 'https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css',
            ],
        ],
    ],

If this works, then you may download the newest plugin files, install those files locally in the public/vendor folder and use the old way configuration to avoid using CDN resources.

Nemachtilli commented 1 year ago

Download the summernote js file and add it to my view and it already works, but while with your adminlte plugin it doesn't work and the summernote plugin has already been updated.

@push('js')
    <script src="{{ asset('assets/js/summernote.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('#summernote').summernote({
                height: 300,
            });
        });
    </script>
@endpush
dfsmania commented 1 year ago

Well, I can't reproduce this on my local environment. You should try to track for an error that gives us a point of investigation. Don't you see any errors on the browser's console when pressing the codeview button?

Nemachtilli commented 1 year ago

It doesn't throw any error in the console, I only have the following:

@section('plugins.Summernote', true)

<x-adminlte-text-editor id="summernote" class="summernote" name="content"
       enable-old-suport>
     {{ old('content') ?? $unit->content }}
</x-adminlte-text-editor>

@push('js')   
    <script>
        $(document).ready(function() {
            $('#summernote').summernote({
                height: 300,
            });
        });
    </script>
@endpush

but if I don't add the javascript from the summernote library it doesn't work

<script src="{{ asset('assets/js/summernote.min.js') }}"></script>
dfsmania commented 1 year ago

Ok, maybe the problem is that the summernote plugin is initialized twice, since the x-adminlte-text-editor component already initializes it internally and you're explicitly initializing it again with your script code. Try setting the plugin configuration using the config property of the component, for example:

@section('plugins.Summernote', true)

@php
$config = [
    "height" => "300",
]
@endphp

<x-adminlte-text-editor id="summernote" class="summernote" name="content" :config="$config"
       enable-old-suport>
     {{ old('content') ?? $unit->content }}
</x-adminlte-text-editor>

Then try without including next:

<script src="{{ asset('assets/js/summernote.min.js') }}"></script>

But use the browser's inspector to check that the files you setup on the plugins configuration file are present.

Nemachtilli commented 1 year ago

OK okay, I'll try and get back to you as soon as possible.

dfsmania commented 11 months ago

Closed, no more feedback...