installation.rst 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. Installation
  2. ============
  3. Download the Bundle
  4. -------------------
  5. Require the bundle in your ``composer.json`` file:
  6. .. code-block:: bash
  7. $ composer require friendsofsymfony/ckeditor-bundle
  8. Register the Bundle
  9. -------------------
  10. If you're using Symfony >= 4.0, skip this step, as it is automatically done by Flex's recipe.
  11. If you choose to not execute the recipe, and if you're using Symfony >= 4.0, update your ``config/bundles.php``:
  12. .. code-block:: php
  13. return [
  14. // ...
  15. FOS\CKEditorBundle\FOSCKEditorBundle::class => ['all' => true],
  16. ];
  17. If you're using Symfony < 4.0, update your ``app/AppKernel.php``:
  18. .. code-block:: php
  19. class AppKernel extends Kernel
  20. {
  21. public function registerBundles()
  22. {
  23. $bundles = array(
  24. new FOS\CKEditorBundle\FOSCKEditorBundle(),
  25. // ...
  26. );
  27. // ...
  28. }
  29. }
  30. Download CKEditor
  31. -----------------
  32. With bundle's command
  33. ~~~~~~~~~~~~~~~~~~~~~
  34. Once, you have registered the bundle, you need to install CKEditor:
  35. If you're using Symfony <= 2.8:
  36. .. code-block:: bash
  37. $ php app/console ckeditor:install
  38. If you're using Symfony >= 3.0:
  39. .. code-block:: bash
  40. $ php bin/console ckeditor:install
  41. If you want to learn more about this command, you can read :doc:`its documentation <usage/ckeditor>`.
  42. Using Webpack Encore
  43. ~~~~~~~~~~~~~~~~~~~~
  44. If you have installed Webpack Encore, you may want to have it as a `node_module` dependency.
  45. You can by running this command:
  46. .. code-block:: bash
  47. # if you are using NPM as package manager
  48. $ npm install --save ckeditor@^4.13.0
  49. # if you are using Yarn as package manager
  50. $ yarn add ckeditor@^4.13.0
  51. Once installed, add the following lines to your Webpack Encore configuration file (this excludes the samples directory from the ckeditor node module):
  52. .. code-block:: javascript
  53. // webpack.config.js
  54. var Encore = require('@symfony/webpack-encore');
  55. Encore
  56. // ...
  57. .copyFiles([
  58. {from: './node_modules/ckeditor4/', to: 'ckeditor/[path][name].[ext]', pattern: /\.(js|css)$/, includeSubdirectories: false},
  59. {from: './node_modules/ckeditor4/adapters', to: 'ckeditor/adapters/[path][name].[ext]'},
  60. {from: './node_modules/ckeditor4/lang', to: 'ckeditor/lang/[path][name].[ext]'},
  61. {from: './node_modules/ckeditor4/plugins', to: 'ckeditor/plugins/[path][name].[ext]'},
  62. {from: './node_modules/ckeditor4/skins', to: 'ckeditor/skins/[path][name].[ext]'},
  63. {from: './node_modules/ckeditor4/vendor', to: 'ckeditor/vendor/[path][name].[ext]'}
  64. ])
  65. // Uncomment the following line if you are using Webpack Encore <= 0.24
  66. // .addLoader({test: /\.json$/i, include: [require('path').resolve(__dirname, 'node_modules/ckeditor')], loader: 'raw-loader', type: 'javascript/auto'})
  67. ;
  68. Then, override the bundle's configuration to point to the new CKEditor path:
  69. .. code-block:: yaml
  70. fos_ck_editor:
  71. # ...
  72. base_path: "build/ckeditor"
  73. js_path: "build/ckeditor/ckeditor.js"
  74. Finally, run encore command:
  75. .. code-block:: bash
  76. # if you are using NPM as package manager
  77. $ npm run dev
  78. # if you are using Yarn as package manager
  79. $ yarn run encore dev
  80. Install the Assets
  81. ------------------
  82. .. note::
  83. This step is not required if you are using Webpack Encore.
  84. Once, you have downloaded CKEditor, you need to install it in the web
  85. directory.
  86. If you're using Symfony <= 2.8:
  87. .. code-block:: bash
  88. $ php app/console assets:install web
  89. If you're using Symfony >= 3.0 without Symfony Flex:
  90. .. code-block:: bash
  91. $ php bin/console assets:install web
  92. If you're using Symfony Flex:
  93. .. code-block:: bash
  94. $ php bin/console assets:install public
  95. Configure Twig
  96. --------------
  97. .. note::
  98. This step is not required if you installed the bundle using Symfony Flex and the recipe was installed.
  99. Finally, add some configuration under the ``twig.form_themes`` config key:
  100. .. code-block:: yaml
  101. # Symfony 2/3: app/config/config.yml
  102. # Symfony 4: config/packages/twig.yaml
  103. twig:
  104. form_themes:
  105. - '@FOSCKEditor/Form/ckeditor_widget.html.twig'