CODEWITHSUNDEEP
phplaravelckeditorelfinder
dbr
dbr

Reputation: 1047

laravel 5.1, CKEditor, barryvdh/laravel-elfinder, no browse button

I have implemented CKEditor as:

<div class="form-group">
{!! Form::label('text', '*Article') !!}
{!! Form::textarea('text', null, ['class' => 'form-control ckeditor', 'placeholder' => 'Article.', 'name'=>'text', 'rows' => '7']) !!}
<script>
    CKEDITOR.replace( 'text', {
        filebrowserBrowseUrl = '/elfinder/ckeditor',
        filebrowserImageBrowseUrl : '/elfinder/ckeditor',
        uiColor : '#9AB8F3',
        height : 300
    } );
</script>

and at the bottom of the file I have

<script src="http://cdn.ckeditor.com/4.4.7/standard/ckeditor.js"></script>

I have installed elfinder following the instructions here:

https://github.com/barryvdh/laravel-elfinder

And I can access elfinder by going to localhost/elfinder (EDIT: or localhost/elfinder/ckeditor)

However, I am missing the "Browse server" button that (I suppose) should open elfinder in a pop-up window.

Here are my routes: enter image description here

Please ask if you need anything more. Thank you!

EDIT: --missing browse button html--

Below is the browse button that is rendered with display:none;.

<a style="margin-top: 14px; margin-left: auto; margin-right: auto; display: none; -moz-user-select: none;" href="javascript:void(0)" title="Browse Server" hidefocus="true" class="cke_dialog_ui_button" role="button" aria-labelledby="cke_76_label" id="cke_77_uiElement"><span id="cke_76_label" class="cke_dialog_ui_button">Browse Server</span></a>

EDIT2: --Inspect this element error--

When I right click in browser on inspect this element and then on console I get back this error: ReferenceError: CKEDITOR is not defined

on first line of the script: CKEDITOR.replace( 'text', {

Upvotes: 1

Views: 2461

Answers (1)

dbr
dbr

Reputation: 1047

After three hours I got the solution:

The CKEDITOR.replace(); needs to go to document.ready function as:

<script>
    $( document ).ready(function() {
        CKEDITOR.replace( 'text', {
            filebrowserBrowseUrl : '/elfinder/ckeditor',
            filebrowserImageBrowseUrl : '/elfinder/ckeditor',
            uiColor : '#9AB8F3',
            height : 300
        } );
    });
</script>

Upvotes: 1

Related Questions