Integrating CKeditor to my symfony 2.5

Question

I download the ckeditor and would like to integrate that in my website which is built using Symfony 2.5, reading from the documentation it seems that all third party code should go inside the vendordirectory but then what? is that all? if i put all ckeditor code inside the vendor directory then what about the js files? dont they go inside a view? I have been searching online for a solution to this and most of them seem to be pointing towards using a bundle available online which i would like to avoid and leave that as my last resort.

I have used ckeditor before with custom php and this is my first time with symfony framework, I know we are supposed to create a textarea and assign it an id or a class but what i am looking for is steps before this, for example

1) Add ckeditor to vendor

2) add it to auto load or something

3) ...

I will really appreciate if someone can direct me on how to do it?

score 1 · Accepted Answer · answered Sep 30 '14 at 14:24

I am not sure if this is the right way to do it but this is what worked for me.

I ended up copying the ckeditor files inside bundle/Resources/public/js
Install the assets by running the command php app/console assets:install
In your twig file add the <script src="{{ asset('bundles/blog/js/ckeditor.js') }}"></script> (please make sure to change this to your bundle name)
Assign class ckeditor to your textarea field, this is how I did it {{ form_widget(form.description, { 'attr': {'class': 'ckeditor'} }) }}

and I can see the editor on my screen enter image description here

If anyone else has a better idea (other than using a bundle) I would love to hear from them

score 0 · Answer 2 · answered Nov 12 '14 at 15:10

Baigs answer will work, but a problem arises when you use CKEditor in different bundles, as you will be coping the whole source directory as an asset for each bundle.

Another solution is to use "egeloen/ckeditor-bundle": "~2.0", in your composer.

You can then create a ckeditor input field in your Form and reference that in your twig file.

You can also create a ckeditor element as per the CKeditor manual in your twig page directly via javascript.

<script src="/bundles/ivoryckeditor/ckeditor.js"></script>
....
<textarea id="editor1"></textarea>
...
<script>
CKEDITOR.replace('editor1');
</script>

Note that custom plugins can be pain, the plugin needs to be stored in the project web directory, but this gets deleted everytime you update composer and dump assets. My solution to this was to create a project scriptHandler which is run with composer and copies the source files into the web public directory on update.

score 0 · Answer 3 · answered Jul 12 '16 at 15:38

Like mark wrote you could use IvoryCKEditorBundle

http://symfony.com/doc/master/bundles/IvoryCKEditorBundle/installation.html

Once installed, if you want to add plugins you can use the configurations like below:

ivory_ck_editor:
    default_config: default
    plugins:
        block:
            path:     "/bundles/mybundle/js/ckeditor/plugins/block/"
            filename: "plugin.js
   .....
   configs:
      default:
          extraPlugins: "block"
   ....
   toolbars:
      configs:
         default: ["Block"]

In my case I have a Symfony bundle called MyBundle. In Resources/public/js I have my js files.

When I load the assets, my files are pushed to the web folder /bundles/mybundle/js.

In the configuration I tell the IvoryCKEditorBundle to look for a new plugin files in that folder.

After in my default configuration, I enable my new ckeditor plugin.

And in the last line I add the new plugin to the toolbar.

Integrating CKeditor to my symfony 2.5

3 Answers3