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

tui-nuxt/editor

Repository files navigation

🍞📝 TOAST UI Editor for Nuxt.JS

TOAST UI Editor for Vue wrapping module

npm (scoped) GitHub Code style is airbnb

CodeFactor

⚠️This project is still under development and should not be used in a production environment.
If you want to use tui-editor please refer to the issue nhn/toast-ui.vue-editor#24 ⚠️

🚩Table of Contents

🔰Getting Started

💿Installation

yarn:

$ yarn add @tui-nuxt/editor

npm:

$ npm install --save @tui-nuxt/editor

🔌Configuration

// nuxt.config.js
module.exports = {
  // ...
  modules: ['@tui-nuxt/editor'],
  tui: {
    editor: {}
  }
};

👋Hello world!

<template>
  <div id="top">
    <!-- Text Editor -->
    <TuiEditor
      mode="markdown"
      preview-style="vertical"
      height="300px"
    />

    <!-- Markdown Viewer -->
    <TuiEditorViewer
      :value="content"
    />
  </div>
</template>

<script>
export default {
  data: ({
    content: 'Hello World!'
  })
};
</script>

TOAST UI Editor for Nuxt.JS basic demo

✒️Editor

<template>
  <TuiEditor />
</template>

See the toast-ui.vue-editor document for options used in the <TuiEditor />.

📃Viewer

<template>
  <TuiEditorViwer />
</template>

See the toast-ui.vue-editor document for options used in the <TuiEditorViewer />.

🔠Internationalization

@tui-nuxt/editor detects the nuxt-i18n module and automatically sets it to the language of the current page. However, if you do not use nuxt-i18n or want to use a different language, please refer to options.language

✅Options

tui.editor

  • type: boolean or object
  • default: {}

The root configuration object for @tui-nuxt/editor. If false, module is disabled.

// nuxt.config.js
module.exports = {
  tui: {
    editor: false, // disable module
    // or
    editor: {}
  }
}

language

  • type: String
  • default:
    • enable nuxt-i18n: current language
    • other: en_US

editor language ISO code. See more support language

exts

  • type: array
  • default: []

Declares extension of tui-editor. builit in extension is chart, colorSyntax, scrollSync, table, uml

{
  tui: {
    editor: {
      exts: []
    }
  }
}

stylesheet

  • type: object

Custom stylesheet path. for more information, see Nuxt.js css property

default:

  {
    tui: {
      editor: {
        stylesheet: {
          editor: 'tui-editor/dist/tui-editor.min.css',
          contents: 'tui-editor/dist/tui-editor-contents.min.css',
          codemirror: 'codemirror/lib/codemirror.css',
          codeHighlight: 'highlight.js/styles/github.css',
          colorPicker: 'tui-color-picker/dist/tui-color-picker.min.css'
        }
      }
    }
  }
stylesheet.editor
  • type: string
  • default: tui-editor/dist/tui-editor.min.css

<TuiEditor /> stylesheet path

stylesheet.contents
  • type: string
  • default: tui-editor/dist/tui-editor-contents.min.css

<TuiEditorViewer /> & wiziwig mode preview stylesheet path

stylesheet.codemirror
  • type: string
  • default: codemirror/lib/codemirror.css

Markdown mode preview stylesheet path

stylesheet.codehightlight
  • type: string
  • default: highlight.js/styles/github.css

Codeblock's code highlight stylesheet path

stylesheet.colorPicker
  • type: string
  • default: tui-color-picker/dist/tui-color-picker.min.css

tui-color-picker stylesheet path