• This repository has been archived on 06/Apr/2020
  • Stars
    star
    229
  • Rank 174,666 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 6 years ago
  • Updated over 4 years ago

Reviews

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

Repository Details

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

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

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

From now on, please submit issues or contributings related to TOAST UI React Wrapper to TOAST UI Editor repository. Thank you🙂.

TOAST UI Editor for Vue

This is Vue component wrapping TOAST UI 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

Vue Wrapper of TOAST UI Editor applies Google Analytics (GA) to collect statistics on the use of open source, in order to identify how widely TOAST UI Editor 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 options when declare Vue Wrapper compoent.

var options = {
    ...
    usageStatistics: false
}

Or, include include tui-code-snippet.js (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-editor

📝 Editor Usage

Load

You can use Toast UI Editor for Vue as moudule format or namespace. Also you can use Single File Component (SFC of Vue). When using module format and SFC, you should load tui-editor.css, tui-editor-contents.css and codemirror.css in the script.

  • Using Ecmascript module

    import 'tui-editor/dist/tui-editor.css';
    import 'tui-editor/dist/tui-editor-contents.css';
    import 'codemirror/lib/codemirror.css';
    import { Editor } from '@toast-ui/vue-editor'
  • Using Commonjs module

    require('tui-editor/dist/tui-editor.css');
    require('tui-editor/dist/tui-editor-contents.css');
    require('codemirror/lib/codemirror.css');
    var toastui = require('@toast-ui/vue-editor');
    var Editor = toastui.Editor;
  • Using Single File Component

    import 'tui-editor/dist/tui-editor.css';
    import 'tui-editor/dist/tui-editor-contents.css';
    import 'codemirror/lib/codemirror.css';
    import Editor from '@toast-ui/vue-editor/src/Editor.vue'
  • Using namespace

    var Editor = toastui.Editor;

Implement

First implement <editor/> in the template.

<template>
    <editor/>
</template>

And then add Editor to the components in your component or Vue instance like this:

import { Editor } from '@toast-ui/vue-editor'

export default {
  components: {
    'editor': Editor
  }
}

or

import { Editor } from '@toast-ui/vue-editor'
new Vue({
    el: '#app',
    components: {
        'editor': Editor
    }
});

Using v-model

If you use v-model, you have to declare a data for binding. (❗️ When using the editor in wysiwyg mode, v-model can cause performance degradation.)

In the example below, editorText is binding to the text of the editor.

<template>
    <editor v-model="editorText"/>
</template>
<script>
import { Editor } from '@toast-ui/vue-editor'

export default {
  components: {
    'editor': Editor
  },
  data() {
      return {
          editorText: ''
      }
  }
}
</script>

Props

Name Type Default Description
value String '' This prop can change content of the editor. If you using v-model, don't use it.
options Object following defaultOptions Options of tui.editor. This is for initailize tui.editor.
height String '300px' This prop can control the height of the editor.
previewStyle String 'tab' This prop can change preview style of the editor. (tab or vertical)
mode String 'markdown' This prop can change mode of the editor. (markdownor wysiwyg)
html String - If you want to change content of the editor using html format, use this prop.
visible Boolean true This prop can control visible of the eiditor.
const defaultOptions = {
    minHeight: '200px',
    language: 'en_US',
    useCommandShortcut: true,
    useDefaultHTMLSanitizer: true,
    usageStatistics: true,
    hideModeSwitch: false,
    toolbarItems: [
        'heading',
        'bold',
        'italic',
        'strike',
        'divider',
        'hr',
        'quote',
        'divider',
        'ul',
        'ol',
        'task',
        'indent',
        'outdent',
        'divider',
        'table',
        'image',
        'link',
        'divider',
        'code',
        'codeblock'
    ]
};

Example :

<template>
    <editor
    :value="editorText"
    :options="editorOptions"
    :html="editorHtml"
    :visible="editorVisible"
    previewStyle="vertical"
    height="500px"
    mode="wysiwyg"
    />
</template>
<script>
import { Editor } from '@toast-ui/vue-editor'

export default {
    components: {
        'editor': Editor
    },
    data() {
        return {
            editorText: 'This is initialValue.',
            editorOptions: {
                hideModeSwitch: true
            },
            editorHtml: '',
            editorVisible: true
        };
    },
};
</script>

Event

  • load : It would be emitted when editor fully load
  • change : It would be emitted when content changed
  • stateChange : It would be emitted when format change by cursor position
  • focus : It would be emitted when editor get focus
  • blur : It would be emitted when editor loose focus

Example :

<template>
    <editor
    @load="onEditorLoad"
    @focus="onEditorFocus"
    @blur="onEditorBlur"
    @change="onEditorChange"
    @stateChange="onEditorStateChange"
    />
</template>
<script>
import { Editor } from '@toast-ui/vue-editor'

export default {
    components: {
        'editor': Editor
    },
    methods: {
        onEditorLoad() {
            // implement your code
        },
        onEditorFocus() {
            // implement your code
        },
        onEditorBlur() {
            // implement your code
        },
        onEditorChange() {
            // implement your code
        },
        onEditorStateChange() {
            // implement your code
        },
    }
};
</script>

Method

If you want to more manipulate the Editor, you can use invoke method to call the method of tui.editor. For more information of method, see method of tui.editor.

First, you need to assign ref attribute of <editor/> and then you can use invoke method through this.$refs like this:

<template>
    <editor ref="tuiEditor"/>
</template>
<script>
import { Editor } from '@toast-ui/vue-editor'

export default {
    components: {
        'editor': Editor
    },
    methods: {
        scroll() {
            this.$refs.tuiEditor.invoke('scrollTop', 10);
        },
        moveTop() {
            this.$refs.tuiEditor.invoke('moveCursorToStart');
        },
        getHtml() {
            let html = this.$refs.tuiEditor.invoke('getHtml');
        }
    }
};
</script>

📃 Viewer Usage

Load

  • Using Ecmascript module

    import 'tui-editor/dist/tui-editor-contents.css';
    import 'highlight.js/styles/github.css';
    import { Viewer } from '@toast-ui/vue-editor'
  • Using Commonjs module

    require('tui-editor/dist/tui-editor-contents.css');
    require('highlight.js/styles/github.css'); 
    var toastui = require('@toast-ui/vue-editor');
    var Viewer = toastui.Viewer;
  • Using Single File Component

    import 'tui-editor/dist/tui-editor-contents.css';
    import 'highlight.js/styles/github.css';
    import Viewer from '@toast-ui/vue-editor/src/Viewer.vue'
  • Using namespace

    var Viewer = toastui.Viewer;

Implement

First implement <viewer/> in the template.

<template>
    <viewer/>
</template>

And then add Viewer to the components in your component or Vue instance like this:

import { Viewer } from '@toast-ui/vue-editor'

export default {
  components: {
    'viewer': Viewer
  }
}

or

import { Viewer } from '@toast-ui/vue-editor'
new Vue({
    el: '#app',
    components: {
        'viewer': Viewer
    }
});

Props

Name Type Default Description
value String '' This prop can change content of the viewer.
height String '300px' This prop can control the height of the viewer.
exts Array This prop can apply the extensions of the viewer.

Example :

<template>
    <viewer
    :value="viewerText"
    height="500px"
    />
</template>
<script>
import { Viewer } from '@toast-ui/vue-editor'

export default {
    components: {
        'viewer': Viewer
    },
    data() {
        return {
            viewerText: '# This is Viewer.\n Hello World.',
        };
    },
};
</script>

Event

  • load : It would be emitted when editor fully load
  • change : It would be emitted when content changed
  • stateChange : It would be emitted when format change by cursor position
  • focus : It would be emitted when editor get focus
  • blur : It would be emitted when editor loose focus

Example :

<template>
    <viewer
    @load="onEditorLoad"
    @focus="onEditorFocus"
    @blur="onEditorBlur"
    @change="onEditorChange"
    @stateChange="onEditorStateChange"
    />
</template>

<script>
import { Viewer } from '@toast-ui/vue-editor'

export default {
    components: {
        'viewer': Viewer
    },
    methods: {
        onEditorLoad() {
            // implement your code
        },
        onEditorFocus() {
            // implement your code
        },
        onEditorBlur() {
            // implement your code
        },
        onEditorChange() {
            // implement your code
        },
        onEditorStateChange() {
            // implement your code
        },
    }
};

🔧 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.

💬 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-calendar

Toast UI Calendar for Vue
Vue
195
star
9

toast-ui.vue-image-editor

Toast UI Image Editor for Vue
Vue
187
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