In a Color Palette, you are also able to specify the exact colors to display using the items parameter. New Y.ColorPalette().render( '#m圜olorPalette')
This will give you a default palette with 10 options.
Load the correct submodule ( aui-color-palette in this case), create a new instance of the Color Palette, and render it.
To use the aui-color-palette, create an HTML element to house the Color Picker. These submodules are created a bit differently. There are some other options that you can pass to your Color Picker instance, such as the other submodules. Now, create a new instance of the Color Picker Popover component, define your trigger, and render it. YUI().use(Ĭreate an element to trigger a Color Picker Popover. Let's start with the popover version here. There are several options available, including aui-color-palette, aui-color-picker-popover, aui-hsv-palette, aui-hsva-palette, and aui-hsva-palette-modal. Then initialize AlloyUI and load the Color Picker submodule you want. Read more about setting the default UI color by using a configuration option in the Adjusting Editor User Interface Color article.Create a dynamic color picker that allows users to select a specific color in many ways including a popover menu, inline values or a palette.įirst load the seed and CSS files, if you haven't yet. See the working “UI Color Picker” sample that showcases how easy it can be to set the editor UI color with the color picker tool. in the application’s database) to be served as in-page configuration when creating subsequent editor instances. User’s choice can then be read from the editor instance by using the method and saved (e.g. A developer can implement it in the administration panel of a CMS or a similar site builder application where the users are able to adjust the look of a website or application.
COLOR UI PICKER CODE
When you are satisfied with your choice, you can copy the working UI color configuration code displayed at the bottom of the dialog window and use it in your editor configuration as described above.Īlthough this feature is mainly useful for developers who are working on their CKEditor 4 customizations, it can also be made available to end users. Last but not least you can simply manually enter an RGB color code in the appropriate field.Ī nice feature of this tool is that it offers instant preview of the selected color, so testing your changes is really quick. You can also choose one of the pre-defined color sets and fine-tune it as you see fit. Clicking this button opens the UI Color Picker dialog window where you find a color palette to help you choose the right color.įor a start, you can click anywhere in the color palette to select a color.
When the plugin is enabled, it adds a new UI Color Picker button ( ) to your toolbar. To make use of the second method, your CKEditor 4 build needs to include the optional UI Color Picker plugin. If you are using a custom skin, you will need to define the function in your skin.js file.ĬKEditor UI color can be set manually in the editor configuration, but adjusting the UI color can be even easier than that. Moono-Lisa, Moono and Kama, already support it. Please note that this feature can only be used for editor skins that are compatible with the so-called "chameleon" feature.
COLOR UI PICKER DOWNLOAD
Features described in this article are provided through an optional plugin that is not included in the CKEditor 4 presets available from the Download site and needs to be added to your custom build with online builder.
0 kommentar(er)
