@nuxt-tui/editor v1.0.0-alpha.3

Install

$ yarn add @nuxt-tui/editor
# or
$ npm install --save @nuxt-tui/editor

Setup

// nuxt.config.js
module.exports = {
  // ...
  modules: ['@nuxt-tui/editor']
  tui: {
    editor: true // or options
  }
}

Usage

<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

Options

stylesheet

• type: object

Editor custom stylesheet. read more

default:

export 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

editor stylesheet

stylesheet.contents

• type: string

viewer stylesheet

stylesheet.codemirror

• type: string

wysiwyg editor style

stylesheet.codeHighlight

• type: string

code block style

stylesheet.colorPicker

• type: string

tui-color-picker style

extensions

• type: array
  • item: string

tui-editor extension list

default:

export default {
  tui: {
    editor: {
      // ...
      extensions: []
    }
  }
}