Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tui-nuxt/editor
🍞📝 TOAST UI Editor for Nuxt.JS
https://github.com/tui-nuxt/editor
nuxt-module nuxtjs toast-ui toast-ui-editor
Last synced: 3 months ago
JSON representation
🍞📝 TOAST UI Editor for Nuxt.JS
- Host: GitHub
- URL: https://github.com/tui-nuxt/editor
- Owner: tui-nuxt
- License: mit
- Archived: true
- Created: 2019-03-11T09:45:06.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-07-30T14:46:22.000Z (over 4 years ago)
- Last Synced: 2024-08-29T13:41:54.204Z (4 months ago)
- Topics: nuxt-module, nuxtjs, toast-ui, toast-ui-editor
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@tui-nuxt/editor
- Size: 1.44 MB
- Stars: 23
- Watchers: 3
- Forks: 2
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
🍞📝 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](#getting-started)
- [💿Installation](#installation)
- [🔌Configuration](#configuration)
- [👋Hello world!](#hello-world)
- [✒️Editor](#️editor)
- [📃Viewer](#viewer)
- [✅Options](#options)
## 🔰Getting Started
### 💿Installation
yarn:
```bash
$ yarn add @tui-nuxt/editor
```
npm:
```bash
$ npm install --save @tui-nuxt/editor
```
### 🔌Configuration
```javascript
// nuxt.config.js
module.exports = {
// ...
modules: ['@tui-nuxt/editor'],
tui: {
editor: {}
}
};
```
### 👋Hello world!
```html
export default {
data: ({
content: 'Hello World!'
})
};
```
[](https://codesandbox.io/s/github/tui-nuxt/editor/tree/master/sample/basic?fontsize=14&module=%2Fpages%2Findex.vue)
## ✒️Editor
```html
```
See the [toast-ui.vue-editor document](https://github.com/nhn/toast-ui.vue-editor#props) for options used in the ``````.
## 📃Viewer
```html
```
See the [toast-ui.vue-editor document](https://github.com/nhn/toast-ui.vue-editor#props-1) for options used in the ``````.
## 🔠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](#language)
## ✅Options
### tui.editor
- type: ```boolean``` or ```object```
- default: ```{}```
The root configuration object for ```@tui-nuxt/editor```. If false, module is disabled.
```javascript
// 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](https://github.com/nhn/tui.editor/tree/master/src/js/langs)
#### exts
- type: array
- default: ```[]```
Declares extension of tui-editor. builit in extension is ```chart```, ```colorSyntax```, ```scrollSync```, ```table```, ```uml```
```javascript
{
tui: {
editor: {
exts: []
}
}
}
```
#### stylesheet
- type: object
Custom stylesheet path. for more information, see [Nuxt.js css property](https://nuxtjs.org/api/configuration-css)
default:
```javascript
{
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```
`````` stylesheet path
##### stylesheet.contents
- type: string
- default: ```tui-editor/dist/tui-editor-contents.min.css```
`````` & 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