Browse buttons not shown about laravel-filemanager HOT 14 CLOSED

@PendoNL Did you get any errors on the browser console?

from laravel-filemanager.

Nope, unfortunately not. The filemanager links are all working correctly and the javascript isn't throwning any errors either. It's just the buttons that don't show up.

I wouldn't know what code to show to illustrate the problem.. there isn't much to show. Every step from both laravel-ckeditor and laravel-filemanager are done, even the configuration is back to default now. The only thing that is different from the laravel-filemanager "how-to" is that I use the jquery adapter instead of the default way to initialize an editor.

from laravel-filemanager.

Did you mean the CKEditor buttons?

from laravel-filemanager.

No, those are working fine. It's the button inside the popup that is missing. Having the browsers enabled should give me a [Browse server] button besides the input field, right?

from laravel-filemanager.

Does it happens on both firefox and google chrome?

from laravel-filemanager.

All browser act the same

from laravel-filemanager.

@PendoNL I have no idea now.
Would you please:

1. list your laravel-ckeditor and laravel-filemanager versions.
2. try out kcfinder or other file-uploading extension of CKEditor. That may help to figure out if the problem is in CKEditor or laravel-filemanager.

Very appreciate!

from laravel-filemanager.

I'll go after this anytime soon! Just a few things to solve in this project first.

from laravel-filemanager.

Not sure of this is related, but (even with your laravel-filemanger plugin disabled) I'm not able to input anything in this popup. This only occures when the CKEditor is loaded inside a bootstrap Modal. When the CKEditor is in the regular body the fields are accesible and can be changed. I only found one similar case in which the jquery adapter was the bad guy, but that didn't fix my issue.

The tab bar is clickable, but anything inside the tab bar is not clickable. I cannot input a web address or change the target. I disabled the filemanager plugin to test, but this popup was still not working. This is the case for ANY popup screen: I'm unable to select/activate an input field inside the popups.

Versions:

        "laravel/framework": "5.1.*",
        "unisharp/laravel-ckeditor": "^4.5",
        "unisharp/laravel-filemanager": "^1.1",

Thanks for your time!

from laravel-filemanager.

I noticed adding the URLs right into the config.js file is working:

CKEDITOR.editorConfig = function( config ) {
    config.filebrowserImageBrowseUrl = '/laravel-filemanager?type=Images';
    config.filebrowserBrowseUrl = '/laravel-filemanager?type=Files';
    // other config
};

The code above is working, adding the dialogs & uploads are working fine aswel as the middleware that is used to gain access to the uploads.

So, am I missing something here? Because the code below does not add anything to the editor. Looks like it only replaces the editor without editing the configuration settings.

<script src="/vendor/unisharp/laravel-ckeditor/ckeditor.js"></script>
<script>
    CKEDITOR.replace('ckeditor', {
        filebrowserImageBrowseUrl: '/laravel-filemanager?type=Images',
        filebrowserImageUploadUrl: '/laravel-filemanager/upload?type=Images&_token={{csrf_token()}}',
        filebrowserBrowseUrl: '/laravel-filemanager?type=Files',
        filebrowserUploadUrl: '/laravel-filemanager/upload?type=Files&_token={{csrf_token()}}'
    });
</script>

With the last code activated, I now receive an error in my console:

TypeError: a is undefined
...KEDITOR.env.isCompatible)return null;a=CKEDITOR.dom.element.get(a);if(a.getEdito...
ckeditor.js (regel 300, kol 52)

it points at the 'a' in "a=CKEDITOR"

from laravel-filemanager.

Issue found!

Apparently, you cannot give your textarea field the class '.ckeditor', this causes the script to automatically bind a CKEditor instance to the textarea before you've set the configuration. My working solution is:

<div class="form-group ">
    <label for="body" class="control-label">Bericht:</label>
    <textarea class="form-control" id="body" name="body" cols="50" rows="10"></textarea>
</div>

With this javascript:

<script src="/vendor/unisharp/laravel-ckeditor/ckeditor.js"></script>
<script src="/vendor/unisharp/laravel-ckeditor/adapters/jquery.js"></script>
<script>
    $('#body').ckeditor({
        filebrowserImageBrowseUrl: '/laravel-filemanager?type=Images',
        filebrowserImageUploadUrl: '/laravel-filemanager/upload?type=Images&_token={{csrf_token()}}',
        filebrowserBrowseUrl: '/laravel-filemanager?type=Files',
        filebrowserUploadUrl: '/laravel-filemanager/upload?type=Files&_token={{csrf_token()}}'
    });
</script>

So, using the class 'ckeditor' will bypass these codes:

CKEDITOR.replace('ckeditor', {options});
$('.ckeditor').ckeditor({options});

My last issue remains (disabled inputs) but this is unrelated to this issue and I think it's even completely unrelated to your plugin. You can close this issue if you want. I'll leave it open for you to comment.

from laravel-filemanager.

@PendoNL

You are right, the <textarea> elements with a class named ckeditor will be automatically replaced by a CKEditor instance. This feature can be customized with the replaceClass attribute.
http://docs.ckeditor.com/#!/api/CKEDITOR-cfg-replaceClass

You might still want to use class as the selector, just avoid ckeditor.

<div class="form-group ">
    <label for="body" class="control-label">Bericht:</label>
    <textarea class="form-control my-editor" id="body" name="body" cols="50" rows="10"></textarea>
</div>

<script src="/vendor/unisharp/laravel-ckeditor/ckeditor.js"></script>
<script src="/vendor/unisharp/laravel-ckeditor/adapters/jquery.js"></script>
<script>
    $( 'textarea.my-editor' ).ckeditor({
        filebrowserImageBrowseUrl: '/laravel-filemanager?type=Images',
        filebrowserImageUploadUrl: '/laravel-filemanager/upload?type=Images&_token={{csrf_token()}}',
        filebrowserBrowseUrl: '/laravel-filemanager?type=Files',
        filebrowserUploadUrl: '/laravel-filemanager/upload?type=Files&_token={{csrf_token()}}'
    });
</script>

I have no idea about the "disabled input" issue either.
The latest stable version of CKEditor is 4.5.6, worth giving it a try.
I added an issue to the laravel-ckeditor fork for the upgrade. ( UniSharp/laravel-ckeditor#3 )

from laravel-filemanager.

Thanks, I knew about the other classes. Just didn't know that the ckeditor class was used by default. You might want to add that to your documentation in the plugin. You know, just in case anyone runs into the same problem. It was a pain in the ass finding this since it was caused by such a little thing.

The disabled input was caused by the CKEditor being put inside a Bootstrap Modal, it was fixed by this answer (http://stackoverflow.com/questions/22637455/how-to-use-ckeditor-in-a-bootstrap-modal).

In the end, all little things. But fixed. Thanks for the quick replies. Afterall a great plugin which I surely are going to use more often!

from laravel-filemanager.

@PendoNL Thanks, I will update the doc later. Glad to know you solved those problems. Happy hacking!

from laravel-filemanager.