Browse buttons not shown

[joshuadegier]

Hi,

for some reason the buttons don't show up. I installed the package UniSharp/laravel-ckeditor first and then this package. The editor works, also the URLs to the different browsers work (including the uploads). However... the buttons don't seem to show up!

I published everything, configured it to my liking.. just those buttons. I tripple checked the configuration of the jquery adapter. This is the code I'm using:

<script src="/vendor/unisharp/laravel-ckeditor/ckeditor.js"></script>
<script src="/vendor/unisharp/laravel-ckeditor/adapters/jquery.js"></script>
<script>
    $( 'textarea.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>

[youchenlee]

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

[joshuadegier]

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.

[youchenlee]

Did you mean the CKEditor buttons?

[joshuadegier]

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?

[youchenlee]

Does it happens on both firefox and google chrome?

[joshuadegier]

All browser act the same

[youchenlee]

@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!

[joshuadegier]

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

[joshuadegier]

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!

[joshuadegier]

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"

[joshuadegier]

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.

[youchenlee]

@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 )

[joshuadegier]

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!

[youchenlee]

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