安装

编辑此页

下载 Bundle

在您的 composer.json 文件中引入 bundle

1
$ composer require friendsofsymfony/ckeditor-bundle

注册 Bundle

如果您使用的是 Symfony >= 4.0，请跳过此步骤，因为它已由 Flex 的 recipe 自动完成。

如果您选择不执行 recipe，并且您使用的是 Symfony >= 4.0，请更新您的 config/bundles.php

1
2
3
4
return [
    // ...
    FOS\CKEditorBundle\FOSCKEditorBundle::class => ['all' => true],
];

如果您使用的是 Symfony < 4.0，请更新您的 app/AppKernel.php

1
2
3
4
5
6
7
8
9
10
11
12
class AppKernel extends Kernel
{
    public function registerBundles()
    {
        $bundles = [
            new FOS\CKEditorBundle\FOSCKEditorBundle(),
            // ...
        ];

        // ...
    }
}

下载 CKEditor

使用 Bundle 命令

一旦您注册了 bundle，您需要安装 CKEditor

如果您使用的是 Symfony <= 2.8

1
$ php app/console ckeditor:install

如果您使用的是 Symfony >= 3.0

1
$ php bin/console ckeditor:install

如果您想了解更多关于此命令的信息，您可以阅读 其文档。

使用 Webpack Encore

如果您已安装 Webpack Encore，您可能希望将其作为 `node_module` 依赖项。

您可以通过运行此命令

1
2
3
4
5
# if you are using NPM as package manager
$ npm install --save ckeditor4@^4.13.0

# if you are using Yarn as package manager
$ yarn add ckeditor4@^4.13.0

安装完成后，将以下行添加到您的 Webpack Encore 配置文件中（这从 ckeditor node 模块中排除了 samples 目录）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// webpack.config.js
var Encore = require('@symfony/webpack-encore');

Encore
    // ...
    .copyFiles([
        {from: './node_modules/ckeditor4/', to: 'ckeditor/[path][name].[ext]', pattern: /\.(js|css)$/, includeSubdirectories: false},
        {from: './node_modules/ckeditor4/adapters', to: 'ckeditor/adapters/[path][name].[ext]'},
        {from: './node_modules/ckeditor4/lang', to: 'ckeditor/lang/[path][name].[ext]'},
        {from: './node_modules/ckeditor4/plugins', to: 'ckeditor/plugins/[path][name].[ext]'},
        {from: './node_modules/ckeditor4/skins', to: 'ckeditor/skins/[path][name].[ext]'},
        {from: './node_modules/ckeditor4/vendor', to: 'ckeditor/vendor/[path][name].[ext]'}
    ])
    // Uncomment the following line if you are using Webpack Encore <= 0.24
    // .addLoader({test: /\.json$/i, include: [require('path').resolve(__dirname, 'node_modules/ckeditor')], loader: 'raw-loader', type: 'javascript/auto'})
;

然后，覆盖 bundle 的配置以指向新的 CKEditor 路径

1
2
3
4
fos_ck_editor:
    # ...
    base_path: "build/ckeditor"
    js_path:   "build/ckeditor/ckeditor.js"

最后，运行 encore 命令

1
2
3
4
5
# if you are using NPM as package manager
$ npm run dev

# if you are using Yarn as package manager
$ yarn run encore dev

安装资源文件

注意

如果您正在使用 Webpack Encore，则不需要此步骤。

一旦您下载了 CKEditor，您需要将其安装到 web 目录中。

如果您使用的是 Symfony <= 2.8

1
$ php app/console assets:install web

如果您使用的是没有 Symfony Flex 的 Symfony >= 3.0

1
$ php bin/console assets:install web

如果您使用的是 Symfony Flex

1
$ php bin/console assets:install public

配置 Twig

注意

如果您使用 Symfony Flex 安装了 bundle 并且 recipe 已安装，则不需要此步骤。

最后，在 twig.form_themes 配置键下添加一些配置

1
2
3
4
5
6
# Symfony 2/3: app/config/config.yml
# Symfony 4: config/packages/twig.yaml

twig:
    form_themes:
        - '@FOSCKEditor/Form/ckeditor_widget.html.twig'
本作品，包括代码示例，根据 Creative Commons BY-SA 3.0 许可协议获得许可。
目录
    版本