1

I'm using the https://ui.toast.com/tui-image-editor library for a image edition functionality, there's a color picker component that comes by default there, I'm trying to change the default color of this color-picker but I can't find a way to do that, I've done some research and looks like this image-editor is using https://github.com/nhn/tui.color-picker as a dependency, so that may be way it's so hard to change the color.

Here's my code:

 <ImageEditor ref={this.editorRef} {...imageEditorOptions} 
            includeUI={{
              loadImage: {'image-path'},
              theme: myTheme,
              menu: ['text'],
              initMenu: 'text',
              menuBarPosition: 'bottom',
            }}
            selectionStyle={{
              cornerSize: 20,
              rotatingPointOffset: 70,
            }}
        />

On the "myTheme" variable I've setup some configurations for the color-pick style, but they haven't been working for setting its default color, probably because it's setup dynamically.

'colorpicker.button.border': '1px solid #1e1e1e',
'colorpicker.title.color': '#fff'

I've also tried setting up the color directly on my page CSS

.tui-image-editor-container .tui-image-editor-main-container {
    bottom: 0 !important;
    top: 0 !important;
    max-height: 450px;
    background-color: red !important;
}
Gabriel Costa
  • 374
  • 1
  • 3
  • 16

1 Answers1

1

there is currently no option to change the default colors of the color picker, refer here: https://github.com/nhn/tui.image-editor/issues/258

a workaround this, is to make use of the startDrawingMode method

so you can create your own color picker or use the tui color picker and then invoke the StartDrawingMode method using your own function, here is how I do it in Vue (Nuxt.js)

<MyColorPicker @colorPicked="startDrawing" />

<tui-image-editor ref="imageEditor">
</tui-image-editor>

startDrawing({ color, drawStyle, size }) {
      this.$refs.imageEditor.invoke('stopDrawingMode')
      this.$refs.imageEditor.invoke('startDrawingMode', drawStyle, {
        width: size,
        color,
      })
    }

drawStyle can be 'FREE_DRAWING' or 'LINE_DRAWING'

this code is in Vue (Nuxt.js) but I believe it is fairly similar it React

Ibrahem Bastawi
  • 26
  • 3