Easyadminbundle: CKEditor & CKFinder

[robertosanval]

Hi Javier!

I'm using your bundle with CKEditor using IvoryCKEditorBundle, works great.

Now I'd to use CKFinder into CKEditor but I think that I need to modify your Bundle code to do that or there's any other way to do this?

I'll really appreciate your help or advise to approach this issue.

Thanks

[javiereguiluz]

I've never used CKFinder. Could you please outline the changes needed to make it work to see how can we help here? For example:

1. Load XXX and YYY JavaScript files
2. Change the ZZZ config option of CKEditor
3. Execute the AAA JavaScript method when loading the page
4. etc.

[robertosanval]

Step 1) First of all, I installed ckfinder/ckfinder-symfony2-bundle to integrate CKFinder with CKEditor it's very easy.

Step 2) After that I only need to render this template into layout.html.twig

{% include "CKSourceCKFinderBundle::setup.html.twig" %}

The above template only renders this small piece of code:

<script type="text/javascript" src="/bundles/cksourceckfinder/ckfinder/ckfinder.js"></script>
<script>CKFinder.config( { connectorPath: '/ckfinder/connector' } );</script>

Step 3) After that I just only need to call this Javascript method, passing the editor variable name, like this:

CKFinder.setupCKEditor( ivory_ckeditor_[entity]_[field] );

That's all.

[javiereguiluz]

I've read the docs of the CKFinder bundle that you mentioned and I can't see the (step 3). Is it really mandatory? If not, the integration would be as easy as creating a small JavaScript file and loading it in your backend with the design.assets configuration option.

In any case, are you proposing that we update the tutorial about integrating CKEditor and EasyAdmin to mention this CKFinder too?

[laurent-bientz]

In our company, we've succeeded the integration like that:

assets:
    js:
        - '/bundles/cksourceckfinder/ckfinder/ckfinder.js'
        - '/js/setup-ckfinder.js'

and in setup-ckfinder.js:

window.onload = function () {
    if (window.CKEDITOR){
        CKFinder.config( { connectorPath: '/app.php/ckfinder/connector' } );
        for (var ckInstance in CKEDITOR.instances){
            CKFinder.setupCKEditor(CKEDITOR.instances[ckInstance]);
        }
    }
}

if it helps

[laurent-bientz]

Hi @javiereguiluz

We've improved the JS code since I posted my message.
My previous code wasn't perfect with the absolute URI on 'app.php' and could cause cache problem when using app_dev environment.

// web/js/setup-ckfinder.js
window.onload = function () {
    if (window.CKEDITOR){
        var path = '/ckfinder/connector';
        CKFinder.config( { connectorPath: (window.location.pathname.indexOf("app_dev.php") == -1 ) ? path : '/app_dev.php'+path} );
        for (var ckInstance in CKEDITOR.instances){
            CKFinder.setupCKEditor(CKEDITOR.instances[ckInstance]);
        }
    }
}

Cheers

[javiereguiluz]

I've created #1588 to add your updated code. Thanks!

[Daishygoyal]

After using above configuration I am getting "invalidconfigoption", tempDirectory is not writable for CKFinder. after install web assets connector folder was missing, then I manually copied the connector to web folder but still getting this error.