README

受以下 pull request 启发 this pull request.

此包的目标是什么？

将自定义功能导入sulu，在这个例子中，是一个自定义内容类型。这个包将创建一个只有几种颜色的颜色选择器。如果您不希望通过sulu的正常颜色选择器选择颜色，这将很有用。

安装

1. 使用以下命令行在您的项目中下载包
   composer require sevengroupfrance/sulu-color-picker-bundle.
2. 在 config/bundles.php 中添加以下代码
   SevenGroupFrance\SuluColorPickerBundle\ColorPickerCustomBundle::class => ['all' => true].
3. 在 assets/admin/package.json 中，在 "dependencies" 对象中添加以下行
   "sulu-color-picker-bundle": "file:node_modules/@sulu/vendor/sevengroupfrance/sulu-color-picker-bundle/src/Resources/js".
4. 在 assets/admin 中，运行 npm install 以初始化包的符号链接目录。
5. 在 assets/admin/index.js 中添加以下行
   import 'sulu-color-picker-bundle'.
6. 在 assets/admin 中，运行 npm run watch 或 npm run build

dotenv 配置

此包使用 .env 常量以及 npm 包 dotenv。在您的 assets/admin/node_modules 目录中安装此包。完成此操作后，在您的 assets/admin/webpack.config.js 文件中添加以下行
在文件开始处

require('dotenv').config({ path: './../../.env' });
const webpack = require('webpack');

在 module.export 对象中

config.plugins.push(new webpack.DefinePlugin({
    "process.env": JSON.stringify(process.env)
}))

这将为 SULU 的 webpack.config.js 的 plugins 对象添加一个新参数并启用您的 js 文件中的环境变量。

颜色配置

这部分相当简单。在您的根目录中打开 .env 文件，并添加常量 COLOR_PICKER_COLORS。

然后，给它一个字符串作为其值，包含您想要的颜色
COLOR_PICKER_COLORS="#F18C1C #3C3C3B #FFFFFF"

颜色可以是十六进制、rgb或颜色名称（几乎任何在 CSS 中有效的东西）并且必须由单个空格隔开。
最后，保存您的 .env 文件后，在 assets/admin 目录中运行新的 npm run watch 或 npm run build 以初始化您保存的颜色。

在模板文件中使用

安装后，要使用此新的内容类型，您必须创建一个新的类型为 color_picker_custom 的属性。

<property name="title_color" type="color_picker_custom">
    <meta>
        <title lang="en">Page's title - 80 characters max</title>
    </meta>
</property>