[Vue + typescript] text editor 사용하기 - TOAST UI Editor for Vue

VUE.JS 목록

 

Toast ui editor for Vue 설치

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

 

 

Toast ui editor for Vue 설정

<template>
  <div>
    <editor />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { Editor } from '@toast-ui/vue-editor'
import '@toast-ui/editor/dist/toastui-editor.css'

@Component({
  components: {
    Editor
  }
})
export default class TsrEditor extends Vue {

}
</script>

 

 

 

 

 

 

옵션 & getter setter

<template>
  <div>
    <editor ref="editor"
      v-if="mode === 'editor' && content !== null"
      :initialValue="content"
      initialEditType="wysiwyg" />
    <viewer ref="viewer"
      v-if="mode === 'viewer' && content !== null"
      :initialValue="content" />
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { Editor, Viewer } from '@toast-ui/vue-editor'
import '@toast-ui/editor/dist/toastui-editor.css'

@Component({
  components: {
    Editor,
    Viewer
  }
})
export default class TsrEditor extends Vue {
  @Prop() mode?: string;
  content?: string | null = null
  static content: any;

  /**
   * Editor value를 반환한다.
   */
  getValue () {
    let content = (this.$refs.editor as Editor).invoke('getHTML')
    if (content === '<p><br class="ProseMirror-trailingBreak"></p>') {
      content = ''
    }
    return content
  }

  /**
   * Editor value를 설정한다.
   */
  setValue (val: string) {
    this.content = val
  }

  /**
   * Editor 초기화한다.
   */
  initValue () {
    this.content = ''
  }
}
</script>

 

https://www.npmjs.com/package/@toast-ui/vue-editor

https://github.com/nhn/tui.editor/blob/master/docs/en/getting-started.md

 

 

VUE.JS 목록