Skip to content
This repository has been archived by the owner on Apr 6, 2020. It is now read-only.

Commit

Permalink
doc: move contents of getting-started.md to README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
Sohee Lee committed Dec 28, 2018
1 parent e4d1fca commit 4885858
Show file tree
Hide file tree
Showing 2 changed files with 230 additions and 437 deletions.
240 changes: 230 additions & 10 deletions README.md
View file
Expand Up @@ -13,13 +13,18 @@
* [Collect statistics on the use of open source](#collect-statistics-on-the-use-of-open-source)
* [Install](#-install)
* [Using npm](#using-npm)
* [Usage](#-usage)
* [Editor Usage](#-editor-usage)
* [Load](#load)
* [Implement](#implement)
* [Using v-model](#using-v-model)
* [Props](#props)
* [Event](#event)
* [Method](#method)
* [Viewer Usage](#-viewer-usage)
* [Load](#load-1)
* [Implement](#implement-1)
* [Props](#props-1)
* [Event](#event-1)
* [Pull Request Steps](#-pull-request-steps)
* [Documents](#-documents)
* [Contributing](#-contributing)
Expand Down Expand Up @@ -50,9 +55,7 @@ tui.usageStatistics = false;
npm install --save @toast-ui/vue-editor
```

## 馃敤 Usage

If you want to more details, see [Tutorials](https://github.com/nhnent/toast-ui.vue-editor/blob/master/docs/getting-started.md) 馃憖
## 馃摑 Editor Usage

### Load

Expand Down Expand Up @@ -83,7 +86,7 @@ You can use Toast UI Editor for Vue as moudule format or namespace. Also you can
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'
import Editor from '@toast-ui/vue-editor/src/Editor.vue'
```

* Using namespace
Expand Down Expand Up @@ -125,7 +128,7 @@ new Vue({

### Using v-model

If you use v-model, you have to declare a `data` for binding.
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.

Expand Down Expand Up @@ -158,7 +161,7 @@ export default {
| 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. (`markdown`or `wysiwyg`) |
| html | String | - | If you want change content of the editor using html format, use this prop. |
| 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. |

```js
Expand Down Expand Up @@ -193,6 +196,40 @@ const defaultOptions = {
]
};
```
Example :

``` html
<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

Expand All @@ -202,6 +239,46 @@ const defaultOptions = {
* focus : It would be emitted when editor get focus
* blur : It would be emitted when editor loose focus

Example :

```html
<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](http://nhnent.github.io/tui.editor/api/latest/ToastUIEditor.html).
Expand Down Expand Up @@ -234,6 +311,152 @@ export default {
</script>
```

## 馃搩 Viewer Usage

### Load

* Using Ecmascript module

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

* Using Commonjs module

```js
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

```js
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

```js
var Viewer = toastui.Viewer;
```

### Implement

First implement `<viewer/>` in the template.

```html
<template>
<viewer/>
</template>
```

And then add `Viewer` to the `components` in your component or Vue instance like this:
```js
import { Viewer } from '@toast-ui/vue-editor'

export default {
components: {
'viewer': Viewer
}
}
```
or
```js
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 editor. |

Example :

``` html
<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 :

```html
<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.
Expand Down Expand Up @@ -262,9 +485,6 @@ If it has no error, commit and then push it!
For more information on PR's step, please see links of Contributing section.
## 馃摍 Documents
* [Getting Started](https://github.com/nhnent/toast-ui.vue-editor/blob/master/docs/getting-started.md)

## 馃挰 Contributing
* [Code of Conduct](https://github.com/nhnent/toast-ui.vue-editor/blob/master/CODE_OF_CONDUCT.md)
* [Contributing guideline](https://github.com/nhnent/toast-ui.vue-editor/blob/master/CONTRIBUTING.md)
Expand Down

0 comments on commit 4885858

Please sign in to comment.