joshw8 / editor

🍞📝 TOAST UI Editor for Nuxt.JS

🍞📝 TOAST UI Editor for Nuxt.JS

TOAST UI Editor for Vue wrapping module

⚠️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
  • 🔌Configuration
  • 👋Hello world!
• ✒️Editor
• 📃Viewer
• ✅Options

🔰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>

✒️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