Integration with Nuxt

[alekstar79]

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

[Wacque]

i did these, and it works

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

[swtalk]

Dooray! 메일 발송 실패 안내

메일 발송 실패 안내

박시우(viewrain@nhn.com) 님께 보낸 메일이 전송되지 못하였습니다.

      실패 사유를 확인해보세요.

        * 받는 사람 : 

박시우(viewrain@nhn.com)

        * 발송 시간 : 

2020-07-23T12:31:45

        * 메일 제목 : 

Re: [nhn/toast-ui.vue-image-editor] Integration with Nuxt (#10)

            * 실패 사유 : 

받는 사람이 회원님의 메일을 수신차단 하였습니다.

      이 메일은 발신전용으로 회신되지 않습니다.
      더 궁금하신 사항은
      dooray@nhn.com
      으로 문의해 주시기 바랍니다.

    © Dooray!.

[klaveren]

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,
        },
      }
  }

[swtalk]

Dooray! 메일 발송 실패 안내

메일 발송 실패 안내

박시우(viewrain@nhn.com) 님께 보낸 메일이 전송되지 못하였습니다.

      실패 사유를 확인해보세요.

        * 받는 사람 : 

박시우(viewrain@nhn.com)

        * 발송 시간 : 

2020-10-08T05:07:01

        * 메일 제목 : 

Re: [nhn/toast-ui.vue-image-editor] Integration with Nuxt (#10)

            * 실패 사유 : 

받는 사람이 회원님의 메일을 수신차단 하였습니다.

      이 메일은 발신전용으로 회신되지 않습니다.
      더 궁금하신 사항은
      dooray@nhn.com
      으로 문의해 주시기 바랍니다.

    © Dooray!.

[dominikstraessle]

@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',
]

[swtalk]

Dooray! 메일 발송 실패 안내

메일 발송 실패 안내

@.***) 님께 보낸 메일이 전송되지 못하였습니다.

      실패 사유를 확인해보세요.

        * 받는 사람 : 

@.***)

        * 발송 시간 : 

2021-06-28T18:30:09

        * 메일 제목 : 

Re: [nhn/toast-ui.vue-image-editor] Integration with Nuxt (#10)

            * 실패 사유 : 

받는 사람이 회원님의 메일을 수신차단 하였습니다.

      이 메일은 발신전용으로 회신되지 않습니다.
      더 궁금하신 사항은
      ***@***.***
      으로 문의해 주시기 바랍니다.

    © Dooray!.