• This repository has been archived on 28/Jul/2021
  • Stars
    star
    187
  • Rank 206,464 (Top 5 %)
  • Language Vue
  • License
    MIT License
  • Created about 6 years ago
  • Updated over 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Toast UI Image Editor for Vue

⚠️Notice: This repository is deprecated️️️️️

TOAST UI ImageEditor Vue Wrapper has been managed separately from the TOAST UI ImageEditor repository. As a result of the distribution of these issues, we decided to deprecate each wrapper repository and manage repository as a mono-repo from the TOAST UI ImageEditor repository.

From now on, please submit issues or contributing related to TOAST UI Vue Wrapper to TOAST UI ImageEditor repository. Thank you🙂.

Vue wrapper for TOAST UI Image Editor

This is Vue component wrapping TOAST UI Image Editor.

vue2 github version npm version license PRs welcome code with hearth by NHN

🚩 Table of Contents

Collect statistics on the use of open source

TOAST UI ImageEditor applies Google Analytics (GA) to collect statistics on the use of open source, in order to identify how widely TOAST UI ImageEditor is used throughout the world. It also serves as important index to determine the future course of projects. location.hostname (e.g. > “ui.toast.com") is to be collected and the sole purpose is nothing but to measure statistics on the usage. To disable GA, use the following usageStatistics option when creating the instance.

const options = {
    ...
    usageStatistics: false
}

const imageEditor = new tui.ImageEditor('#tui-image-editor-container', options);

Or, include tui-code-snippet(v1.4.0 or later) and then immediately write the options as follows:

tui.usageStatistics = false;

💾 Install

Using npm

npm install --save @toast-ui/vue-image-editor

If you install other packages, you may lose dependency on fabric. You need to reinstall the fabric.
npm install --no-save --no-optional fabric@~1.6.7

🔡 Usage

Load

  • Using namespace

    const ImageEditor = toastui.ImageEditor;
  • Using module

    // es modules
    import {ImageEditor} from '@toast-ui/vue-image-editor';
    
    // commonjs require
    const {ImageEditor} = require('@toast-ui/vue-image-editor');
  • Using <script>

    If you just add javascript file to your html, you use toastui-vue-image-editor.js downloaded. Insert toastui-vue-image-editor.js with vue in your html like this:

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="path/to/toastui-vue-image-editor.js"></script>
  • Using only Vue wrapper component (Single File Component)

    toastui-vue-image-editor.js has all of the tui.ImageEditor. If you only need vue wrapper component, you can use @toast-ui/vue-image-editor/src/ImageEditor.vue like this:

    import ImageEditor from '@toast-ui/vue-image-editor/src/ImageEditor.vue'

Implement

First insert <tui-image-editor> in the template or html. includeUi and options props are required.

<tui-image-editor :include-ui="useDefaultUI" :options="options"></tui-image-editor>

Load ImageEditor component and then add it to the components in your component or Vue instance.

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

export default {
    components: {
        'tui-image-editor': ImageEditor
    },
    data() {
        return {
            useDefaultUI: true,
            options: { // for tui-image-editor component's "options" prop
                cssMaxWidth: 700,
                cssMaxHeight: 500
            }
        };
    }
}

Props

You can use includeUi and options props. Example of each props is in the Getting Started.

  • includeUi

    Type Required Default
    Boolean X true

    This prop can contained the includeUI prop in the option. You can see the default UI.

  • options

    Type Required Default
    Object X { cssMaxWidth: 700, cssMaxHeight: 500 }

    You can configurate your image editor using options prop. For more information which properties can be set in options, see options of tui.image-editor.

Event

  • addText: The event when 'TEXT' drawing mode is enabled and click non-object area.
  • mousedown: The mouse down event with position x, y on canvas
  • objectActivated: The event when object is selected(aka activated).
  • objectMoved: The event when object is moved.
  • objectScaled: The event when scale factor is changed.
  • redoStackChanged: Redo stack changed event
  • textEditing: The event which starts to edit text object.
  • undoStackChanged: Undo stack changed event
<tui-image-editor ...
                  @addText="onAddText"
                  @objectMoved="onObjectMoved">
</tui-image-editor>
...
methods: {
    onAddText(pos) {
        ...
    },
    onObjectMoved(props) {
        ...
    }
}
...

For more information such as the parameters of each event, see event of tui.image-editor.

Method

For use method, first you need to assign ref attribute of element like this:

<tui-image-editor ref="tuiImageEditor" :options="options"></tui-image-editor>

After then you can use methods through this.$refs. We provide getRootElement and invoke methods.

  • getRootElement

    You can get root element of image editor using this method.

    this.$refs.tuiImageEditor.getRootElement();
  • invoke

    If you want to more manipulate the ImageEditor, you can use invoke method to call the method of tui.ImageEditor. First argument of invoke is name of the method and second argument is parameters of the method. To find out what kind of methods are available, see method of tui.ImageEditor.

    const drawingMode = this.$refs.tuiImageEditor.invoke('getDrawingMode');
    
    this.$refs.tuiImageEditor.invoke('loadImageFromURL', './sampleImage.png', 'My sample image');
    
    this.$refs.tuiImageEditor.invoke('startDrawingMode', 'FREE_DRAWING', {
        width: 10,
        color: 'rgba(255, 0, 0, 0.5)'
    });

🔧 Pull Request Steps

TOAST UI products are open source, so you can create a pull request(PR) after you fix issues. Run npm scripts and develop yourself with the following process.

Setup

Fork develop branch into your personal repository. Clone it to local computer. Install node modules. Before starting development, you should check to haveany errors.

$ git clone https://github.com/{your-personal-repo}/[[repo name]].git
$ cd [[repo name]]
$ npm install

Develop

Let's start development!

Pull Request

Before PR, check to test lastly and then check any errors. If it has no error, commit and then push it!

For more information on PR's step, please see links of Contributing section.

📙 Documents

💬 Contributing

📜 License

This software is licensed under the MIT © NHN.

More Repositories

1

tui.editor

🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.
TypeScript
16,941
star
2

tui.calendar

🍞📅A JavaScript calendar that has everything you need.
TypeScript
11,682
star
3

tui.image-editor

🍞🎨 Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.
JavaScript
6,860
star
4

tui.chart

🍞📊 Beautiful chart for data visualization.
TypeScript
5,328
star
5

tui.grid

🍞🔡 The Powerful Component to Display and Edit Data. Experience the Ultimate Data Transformer!
TypeScript
2,399
star
6

fe.javascript

FE DEV LAB
1,116
star
7

gpm.unity

A brand of NHN providing free services required for game development.
319
star
8

toast-ui.vue-editor

This repository is DEPRECATED! GO TO 👉 https://github.com/nhn/tui.editor/tree/master/apps/vue-editor
JavaScript
229
star
9

toast-ui.vue-calendar

Toast UI Calendar for Vue
Vue
195
star
10

tui.jsdoc-template

TUI JSDoc Template, Demo: https://nhnent.github.io/tui.jsdoc-template/latest/
JavaScript
176
star
11

toast-ui.react-calendar

TOAST UI Calendar wrapper for React.js
JavaScript
169
star
12

socket.io-client-unity3d

socket.io-Client for Unity3D, which is compatible with socket.io v1.x
C#
166
star
13

toast-ui.react-image-editor

TOAST UI ImageEditor wrapper for React.js
JavaScript
117
star
14

toast-ui.doc

JavaScript
115
star
15

toast-haste.framework

TOAST Haste framework is a pure java implementation of asynchronous game server framework
Java
97
star
16

tui.date-picker

Component that selects specific date.
JavaScript
92
star
17

tui.code-snippet

Group of utility methods to make ease with developing javascript applications.
JavaScript
92
star
18

tui.tree

Component that displays data hierarchically.
JavaScript
91
star
19

tui.time-picker

Component that selects specific time.
JavaScript
57
star
20

tui.color-picker

Colorpicker component for web services.
JavaScript
57
star
21

toast-ui.vue-chart

Toast UI Chart for Vue
Vue
51
star
22

toast-ui.vue-grid

This repository is DEPRECATED! GO TO 👉
Vue
51
star
23

tui.pagination

Component that automatically calculate and generate page numbers.
JavaScript
49
star
24

toast-ui.react-editor

This repository is DEPRECATED! GO TO 👉 https://github.com/nhn/tui.editor/tree/master/apps/react-editor
JavaScript
46
star
25

tui.context-menu

Component that creates a menu when the right mouse button is clicked.
JavaScript
44
star
26

tui.app-loader

Component that installs a specific app by determining whether an app is installed on mobile devices.
JavaScript
43
star
27

eat

Json based scenario testing tool(which can have test for functional and non-functional)
Java
40
star
28

toast-ui.react-chart

Toast UI Chart for React
JavaScript
27
star
29

tui.ngx-calendar

TypeScript
26
star
30

tui.file-uploader

JavaScript
26
star
31

tui.eslint.config

ESLint Sharable Configuration for TUI Component
JavaScript
23
star
32

tui.auto-complete

TOAST UI Auto Complete
JavaScript
21
star
33

toast-ui.react-grid

This repository is DEPRECATED! GO TO 👉
JavaScript
19
star
34

toast-ui.select-box

Component that selects an option in the drop-down list.
JavaScript
18
star
35

toast-haste.sdk.dotnet

This repo is .NET client for TOAST Haste framework.
C#
17
star
36

tui.rolling

Components that rotates and displays items such as a slideshow.
JavaScript
14
star
37

tui.virtual-keyboard

JavaScript
12
star
38

tui.virtual-scroll

JavaScript
12
star
39

tui.animation

Javascript animation library with ease
JavaScript
11
star
40

tui.layout

JavaScript
10
star
41

toast.gamebase.unity.sample

C#
10
star
42

tui.flicking

JavaScript
7
star
43

tui.placeholder

JavaScript
7
star
44

dooray.scrum

JavaScript
7
star
45

dooray.vote

JavaScript
7
star
46

adlib.android_media_app

Java
6
star
47

tui.gesture-reader

fe.component-gesture-reader
JavaScript
6
star
48

tui.floating-layer

JavaScript
6
star
49

toast-ui.detect-runtime-error-actions

🧐 Detect Runtime Error with browserstack
JavaScript
6
star
50

tui.dom

DOM control library for TOAST UI Components
JavaScript
5
star
51

toastcloud.sdk

Objective-C
4
star
52

gameanvil.sample-game-server

Java
3
star
53

hands-on-labs.java.spring-boot-custom-starter

Python
3
star
54

gameanvil.sample-game-test

Java
3
star
55

nhncloud.ios.sdk

Objective-C
3
star
56

toast-ui.date

JavaScript
2
star
57

toast.gamebase.ios.sdk

2
star
58

toast.gamebase.unity.tools.setting-tool

2
star
59

hands-on-labs.java.mybatis-to-jpa

Java
2
star
60

hands-on-labs.gamebase.guest-auth-on-js

Python
2
star
61

hands-on-labs.toastui.calendar-timetable

Python
2
star
62

adlib.ios_media_app

Objective-C
2
star
63

gameanvil.agent

2
star
64

hands-on-labs.java.spring-boot-actuator

Makefile
1
star
65

hands-on-labs.gamebase.google-setting

Python
1
star
66

toast-ui.release-notes

Publish Github release note from a tag.
JavaScript
1
star
67

gameanvil.sample-game-client-unity

HTML
1
star
68

hands-on-labs.toastui.chart-dashboard

Python
1
star
69

hands-on-labs.gamebase.install-with-setting-tool

Python
1
star
70

k8s.oss-helm-packages

JavaScript
1
star
71

hands-on-labs.toastui.grid-account-book

Python
1
star
72

tui.webpack.safe-umd-plugin

Webpack plugin to handle optional dependencies safely when using libraryTarget: umd
JavaScript
1
star
73

hands-on-labs.java.jvmtop

Python
1
star
74

hands-on-labs.gamebase.guest-auth-on-unity

HTML
1
star
75

tui.component.calendar

JavaScript
1
star
76

terraform-provider-nhncloud

Terraform Provider for NHN Cloud
Go
1
star
77

ace.guide.script

웹로그분석 스크립트 설치가이드
HTML
1
star
78

hands-on-labs.toastui.editor-ext

Python
1
star