draft-js-color-picker
This package allows you to use dynamic colors on your draft-js editor
Table of Contents
Installation
npm i --save draft-js-color-picker
API
inside the constructor initialize the picker functions
this this; this thisstateeditorState; // Step 2: run the colorPickerPlugin function thispicker = ;
this.picker
- .addColor() - Adds color to the text selection
- .currentColor() - Gets the current color for the selection
- .removeColor() - Removes the color from the selection.
- .customStyleFn() - Used by the editor to apply the colors
- .exporter() - Export the editorsState inlineStyles
component
- ColorPicker props:
- presetColors { array } - swatch preset colors
- toggleColors { function } - function that adds the color
- color { string } - the current color
Usage
;;;// optionals;; // Add preset colors to the pickerconst presetColors = '#ff00aa' '#F5A623' '#F8E71C' '#8B572A' '#7ED321' '#417505' '#BD10E0' '#9013FE' '#4A90E2' '#50E3C2' '#B8E986' '#000000' '#4A4A4A' '#9B9B9B' '#FFFFFF'; // Initialize the contentState { superprops; thisstate = editorState: ; // Step 1: Create the functions to get and update the editorState this this; this thisstateeditorState; // Step 2: run the colorPickerPlugin function thispicker = ; } { const editorState = thisstate; // Optional: you can use an export the color styles if you plan to render html const inlineStyles = thispicker; const html = ; return <div style= display: 'flex' padding: '15px' > <div style= flex: '1 0 25%' > /* Step 4: pass the functions to the color picker */ <ColorPicker toggleColor= thispicker presetColors=presetColors color=thispicker /> <button onClick=thispickerremoveColor>clear</button> </div> <div style= flex: '1 0 25%' > <h2>Draft-JS Editor</h2> /* Step 5 pass the customStyleFn */ <Editor customStyleFn=thispickercustomStyleFn editorState=editorState onChange=thisupdateEditorState placeholder="Tell a story..." readOnly=thisstatereadOnly /> </div> <div style= flex: '1 0 25%' > <h2>Exported HTML</h2> <div dangerouslySetInnerHTML= __html: html /> </div> </div> ; };
Support
Please open an issue for support.
Contributing
Please contribute using Github Flow. Create a branch, add commits, and open a pull request.