Giters

nhn / toast-ui.vue-image-editor

Toast UI Image Editor for Vue

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Integration with Nuxt

alekstar79 opened this issue · comments

commented

Excellent editor! If only there was still a way to adapt it to Nuxt...

commented

i did these, and it works

useDefaultUI seems not work, so i required tui-image-editor.css

企业微信20200723112814

commented
commented

in Nuxtjs just create a file plugins/tui-image-editor.js

import Vue from 'vue'
import { ImageEditor } from '@toast-ui/vue-image-editor'

// Load Style Code
import 'tui-color-picker/dist/tui-color-picker.css'
Vue.component('tui-image-editor', ImageEditor)

Then import the plugin in nuxt.config.js.

  plugins: [
    { src: '~/plugins/tui-image-editor', mode: 'client' },
  ],

To fix layout problem, I had imported the css directlly as a Globall css in nuxt.config.js.

 css: [
    'tui-image-editor/dist/tui-image-editor.css',
  ],

To use, create a simple component.vue with some thing like this:

<template>
<tui-image-editor v-if="!loading" ref="editor" v-resize="onResize" :options="options" />
</template>

<script>
/* eslint-disable no-console */
import { mapGetters } from 'vuex'
import Theme from './Theme'
export default {
  data() {
    return {
      loading: true,
      useDefaultUI: true,
      options: false,
      windowSize: {
        x: 0,
        y: 0,
      },
    }
  },
  created() {
       this.options = {
        includeUI: {
          // locale: tuiImageEeditor,
          // theme: await Theme(this.Profile),
          menuBarPosition: 'top',
          menu: [
            'crop',
            // 'draw',
            'filter',
            'flip',
            // 'icon',
            'mask',
            'rotate',
            'shape',
            'text',
          ],
          initMenu: '',
          uiSize: {
            // width: '1000',
            // height: '750',
          },
        },
        // for tui-image-editor component's "options" prop
        usageStatistics: false,
        cssMaxWidth: 700,
        cssMaxHeight: 700,
        selectionStyle: {
          cornerSize: 20,
          rotatingPointOffset: 70,
        },
      }
  }
commented
commented

@klaveren
I also had to include the color picker css:

  css: [
    'tui-image-editor/dist/tui-image-editor.css',
    'tui-color-picker/dist/tui-color-picker.css',
]
commented