Giters

nhn / toast-ui.vue-image-editor

Toast UI Image Editor for Vue

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to change the default theme of toast ui image editor?

naveenkumarmark opened this issue · comments

commented

Version

"@toast-ui/vue-image-editor": "^1.0.2"

Development Environment

Chrome Version 76.0, Windows 10

Current Behavior

The Default theme is in black color

<div id="app" class="imageEditorApp ml-5">
    <image-editor ref="tuiImageEditor" id="tuiImageEditorUI"
          v-if="options.includeUI.loadImage.path"
          :include-ui="useDefaultUI"
          :options="options"
      ></image-editor>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.3.2/fabric.js"></script>
<script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"></script>
<script type="text/javascript" src="https://uicdn.toast.com/tui-color-picker/v2.2.3/tui-color-picker.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script>
import 'tui-image-editor/dist/tui-image-editor.css';
import ImageEditor from '@toast-ui/vue-image-editor/src/ImageEditor.vue'
export default {
  name: 'ToastUI',
  components: {
    'image-editor': ImageEditor
  },
  data () {
    const icona = require('tui-image-editor/dist/svg/icon-a.svg')
    const iconb = require('tui-image-editor/dist/svg/icon-b.svg')
    const iconc = require('tui-image-editor/dist/svg/icon-c.svg')
    const icond = require('tui-image-editor/dist/svg/icon-d.svg')
    var whiteTheme = {
      'menu.normalIcon.path': icond,
      'menu.activeIcon.path': iconb,
      'menu.disabledIcon.path': icona,
      'menu.hoverIcon.path': iconc,
      'submenu.normalIcon.path': icond,
      'submenu.activeIcon.path': iconb
    }
    return {
      useDefaultUI: true,
      options: {
        includeUI: {
          loadImage: {
            path: '', 
            name: ''
         },
          theme: whiteTheme,
          initMenu: '',
          menuBarPosition: 'bottom',
          menu: ['crop', 'flip', 'rotate', 'draw', 'shape', 'icon', 'text', 'mask'], //, 'filter',
        },
        cssMaxWidth: document.documentElement.clientWidth,
        cssMaxHeight: document.documentElement.clientHeight,
        selectionStyle: {
          cornerSize: 20,
          rotatingPointOffset: 70
        }
      }
    }
  },

Expected Behavior

How to change the default theme to white theme?

commented

This worked like a charm!

 'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png',
 'common.bisize.width': '251px',
 'Common. bisize. height': '21px',
 'common.backgroundImage': './img/bg.png',
 'common.backgroundColor': '#fff',
  'common.border': '1px solid #c1c1c1',
commented

This worked like a charm!

 'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png',
 'common.bisize.width': '251px',
 'Common. bisize. height': '21px',
 'common.backgroundImage': './img/bg.png',
 'common.backgroundColor': '#fff',
  'common.border': '1px solid #c1c1c1',

Can you fix your spaces, While using spaces it shows error, Correct one:

'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png',
'common.bisize.width': '251px',
'Common.bisize.height': '21px',
'common.backgroundImage': './img/bg.png',
'common.backgroundColor': '#fff',
'common.border': '1px solid #c1c1c1',

commented

Where do you put those configurations?

commented