Vuejs-Toast ui.vue editor v1.1.1: toast-ui.vue-editor TOAST UI Editortoast-ui.vue-editor - Vue Wrapper for TOAST UI Editor.

icon
Latest Release: v1.1.1

Bug Fixes

  • 9ca0b7f Fix: make viewer to use its exts property
  • 3319c66 Fix: remove extScrollSync from viewer story which causes error

Enhancement

  • 199c252 Refactor: remove unused import from stories
Source code(tar.gz)
Source code(zip)

⚠️ Notice: This repository is deprecated️️️️️

TOAST UI Editor Vue Wrapper has been managed separately from the TOAST UI Editor repository. As a result of the distribution of these issues, we decided to deprecated each wrapper repository and manage repository as a mono-repo from the TOAST UI Editor repository.

From now on, please submit issues or contributings related to TOAST UI React Wrapper to TOAST UI Editor repository. Thank you ? .

TOAST UI Editor for Vue

This is Vue component wrapping TOAST UI Editor.

vue2 github version npm version license PRs welcome code with hearth by NHN

? Table of Contents

Collect statistics on the use of open source

Vue Wrapper of TOAST UI Editor applies Google Analytics (GA) to collect statistics on the use of open source, in order to identify how widely TOAST UI Editor is used throughout the world. It also serves as important index to determine the future course of projects. location.hostname (e.g. > “ui.toast.com") is to be collected and the sole purpose is nothing but to measure statistics on the usage. To disable GA, use the following usageStatistics options when declare Vue Wrapper compoent.

var options = {
    ...
    usageStatistics: false
}

Or, include include tui-code-snippet.js (v1.4.0 or later) and then immediately write the options as follows:

tui.usageStatistics = false;

? Install

Using npm

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

? Editor Usage

Load

You can use Toast UI Editor for Vue as moudule format or namespace. Also you can use Single File Component (SFC of Vue). When using module format and SFC, you should load tui-editor.css, tui-editor-contents.css and codemirror.css in the script.

  • Using Ecmascript module

    import 'tui-editor/dist/tui-editor.css';
    import 'tui-editor/dist/tui-editor-contents.css';
    import 'codemirror/lib/codemirror.css';
    import { Editor } from '@toast-ui/vue-editor'
  • Using Commonjs module

    require('tui-editor/dist/tui-editor.css');
    require('tui-editor/dist/tui-editor-contents.css');
    require('codemirror/lib/codemirror.css');
    var toastui = require('@toast-ui/vue-editor');
    var Editor = toastui.Editor;
  • Using Single File Component

    import 'tui-editor/dist/tui-editor.css';
    import 'tui-editor/dist/tui-editor-contents.css';
    import 'codemirror/lib/codemirror.css';
    import Editor from '@toast-ui/vue-editor/src/Editor.vue'
  • Using namespace

    var Editor = toastui.Editor;

Implement

First implement <editor/> in the template.

<template>
    <editor/>
</template>

And then add Editor to the components in your component or Vue instance like this:

import { Editor } from '@toast-ui/vue-editor'

export default {
  components: {
    'editor': Editor
  }
}

or

import { Editor } from '@toast-ui/vue-editor'
new Vue({
    el: '#app',
    components: {
        'editor': Editor
    }
});

Using v-model

If you use v-model, you have to declare a data for binding. ( ❗️ When using the editor in wysiwyg mode, v-model can cause performance degradation.)

In the example below, editorText is binding to the text of the editor.

<template>
    <editor v-model="editorText"/>
</template>
<script>
import { Editor } from '@toast-ui/vue-editor'

export default {
  components: {
    'editor': Editor
  },
  data() {
      return {
          editorText: ''
      }
  }
}
</script>

Props

Name Type Default Description
value String '' This prop can change content of the editor. If you using v-model, don't use it.
options Object following defaultOptions Options of tui.editor. This is for initailize tui.editor.
height String '300px' This prop can control the height of the editor.
previewStyle String 'tab' This prop can change preview style of the editor. (tab or vertical)
mode String 'markdown' This prop can change mode of the editor. (markdownor wysiwyg)
html String - If you want to change content of the editor using html format, use this prop.
visible Boolean true This prop can control visible of the eiditor.
const defaultOptions = {
    minHeight: '200px',
    language: 'en_US',
    useCommandShortcut: true,
    useDefaultHTMLSanitizer: true,
    usageStatistics: true,
    hideModeSwitch: false,
    toolbarItems: [
        'heading',
        'bold',
        'italic',
        'strike',
        'divider',
        'hr',
        'quote',
        'divider',
        'ul',
        'ol',
        'task',
        'indent',
        'outdent',
        'divider',
        'table',
        'image',
        'link',
        'divider',
        'code',
        'codeblock'
    ]
};

Example :

<template>
    <editor
    :value="editorText"
    :options="editorOptions"
    :html="editorHtml"
    :visible="editorVisible"
    previewStyle="vertical"
    height="500px"
    mode="wysiwyg"
    />
</template>
<script>
import { Editor } from '@toast-ui/vue-editor'

export default {
    components: {
        'editor': Editor
    },
    data() {
        return {
            editorText: 'This is initialValue.',
            editorOptions: {
                hideModeSwitch: true
            },
            editorHtml: '',
            editorVisible: true
        };
    },
};
</script>

Event

  • load : It would be emitted when editor fully load
  • change : It would be emitted when content changed
  • stateChange : It would be emitted when format change by cursor position
  • focus : It would be emitted when editor get focus
  • blur : It would be emitted when editor loose focus

Example :

<template>
    <editor
    @load="onEditorLoad"
    @focus="onEditorFocus"
    @blur="onEditorBlur"
    @change="onEditorChange"
    @stateChange="onEditorStateChange"
    />
</template>
<script>
import { Editor } from '@toast-ui/vue-editor'

export default {
    components: {
        'editor': Editor
    },
    methods: {
        onEditorLoad() {
            // implement your code
        },
        onEditorFocus() {
            // implement your code
        },
        onEditorBlur() {
            // implement your code
        },
        onEditorChange() {
            // implement your code
        },
        onEditorStateChange() {
            // implement your code
        },
    }
};
</script>

Method

If you want to more manipulate the Editor, you can use invoke method to call the method of tui.editor. For more information of method, see method of tui.editor.

First, you need to assign ref attribute of <editor/> and then you can use invoke method through this.$refs like this:

<template>
    <editor ref="tuiEditor"/>
</template>
<script>
import { Editor } from '@toast-ui/vue-editor'

export default {
    components: {
        'editor': Editor
    },
    methods: {
        scroll() {
            this.$refs.tuiEditor.invoke('scrollTop', 10);
        },
        moveTop() {
            this.$refs.tuiEditor.invoke('moveCursorToStart');
        },
        getHtml() {
            let html = this.$refs.tuiEditor.invoke('getHtml');
        }
    }
};
</script>

? Viewer Usage

Load

  • Using Ecmascript module

    import 'tui-editor/dist/tui-editor-contents.css';
    import 'highlight.js/styles/github.css';
    import { Viewer } from '@toast-ui/vue-editor'
  • Using Commonjs module

    require('tui-editor/dist/tui-editor-contents.css');
    require('highlight.js/styles/github.css'); 
    var toastui = require('@toast-ui/vue-editor');
    var Viewer = toastui.Viewer;
  • Using Single File Component

    import 'tui-editor/dist/tui-editor-contents.css';
    import 'highlight.js/styles/github.css';
    import Viewer from '@toast-ui/vue-editor/src/Viewer.vue'
  • Using namespace

    var Viewer = toastui.Viewer;

Implement

First implement <viewer/> in the template.

<template>
    <viewer/>
</template>

And then add Viewer to the components in your component or Vue instance like this:

import { Viewer } from '@toast-ui/vue-editor'

export default {
  components: {
    'viewer': Viewer
  }
}

or

import { Viewer } from '@toast-ui/vue-editor'
new Vue({
    el: '#app',
    components: {
        'viewer': Viewer
    }
});

Props

Name Type Default Description
value String '' This prop can change content of the viewer.
height String '300px' This prop can control the height of the viewer.
exts Array This prop can apply the extensions of the viewer.

Example :

<template>
    <viewer
    :value="viewerText"
    height="500px"
    />
</template>
<script>
import { Viewer } from '@toast-ui/vue-editor'

export default {
    components: {
        'viewer': Viewer
    },
    data() {
        return {
            viewerText: '# This is Viewer.\n Hello World.',
        };
    },
};
</script>

Event

  • load : It would be emitted when editor fully load
  • change : It would be emitted when content changed
  • stateChange : It would be emitted when format change by cursor position
  • focus : It would be emitted when editor get focus
  • blur : It would be emitted when editor loose focus

Example :

<template>
    <viewer
    @load="onEditorLoad"
    @focus="onEditorFocus"
    @blur="onEditorBlur"
    @change="onEditorChange"
    @stateChange="onEditorStateChange"
    />
</template>

<script>
import { Viewer } from '@toast-ui/vue-editor'

export default {
    components: {
        'viewer': Viewer
    },
    methods: {
        onEditorLoad() {
            // implement your code
        },
        onEditorFocus() {
            // implement your code
        },
        onEditorBlur() {
            // implement your code
        },
        onEditorChange() {
            // implement your code
        },
        onEditorStateChange() {
            // implement your code
        },
    }
};

? Pull Request Steps

TOAST UI products are open source, so you can create a pull request(PR) after you fix issues. Run npm scripts and develop yourself with the following process.

Setup

Fork develop branch into your personal repository. Clone it to local computer. Install node modules. Before starting development, you should check to haveany errors.

$ git clone https://github.com/{your-personal-repo}/[[repo name]].git
$ cd [[repo name]]
$ npm install

Develop

Let's start development!

Pull Request

Before PR, check to test lastly and then check any errors. If it has no error, commit and then push it!

For more information on PR's step, please see links of Contributing section.

? Contributing

? License

This software is licensed under the MIT © NHN.

Comments

  • Prop for disabling the editor
    Prop for disabling the editor

    Mar 3, 2020

    I was wondering if it is possible to add a prop that allows the editor to be disabled. I also use this editor to only display the current value, the user has to press an "edit" button to be able to start editing. Right now I made a little workaround myself for this. I just add a div on top of the editor with an opacity. This solution could work find but if the content in the editor is long you can't scroll down. Any plans/possibility to add this? Or anyone else knows a better way to work around this?

    Reply
  • hooks
    hooks

    Mar 3, 2020

    vue나 nuxt에서는 hooks의 addImageBlob에 대한 설명이 언급되어있는게 없어서 현재 nuxt를 사용중인데 props로 전달이 가능한 방법이 있나요?

    Reply
  •  ERROR  Failed to compile with 2 errors
    ERROR Failed to compile with 2 errors

    Mar 19, 2020

    Version

    2.0.0

    Test Environment

    macOS Mojave 10.14.6(18G3020)

    Current Behavior

    [email protected]:~/Dev/Git/ggomjirak/Refrigerator/admin-server/frontend(feature/notice⚡) » npm run build
    
    > [email protected] build /Users/sunggillee/Dev/Git/ggomjirak/Refrigerator/admin-server/frontend
    > vue-cli-service build
    
    
    ⠇  Building for production...
    
     ERROR  Failed to compile with 2 errors                                                                                                                                      14:10:45
    
    These dependencies were not found:
    
    * tui-editor/dist/tui-editor-contents.css in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vuetify-loader/lib/loader.js??ref--18-0!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/notice/Notice.vue?vue&type=script&lang=js&
    * tui-editor/dist/tui-editor.css in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vuetify-loader/lib/loader.js??ref--18-0!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/notice/Notice.vue?vue&type=script&lang=js&
    
    To install them, you can run: npm install --save tui-editor/dist/tui-editor-contents.css tui-editor/dist/tui-editor.css
     ERROR  Build failed with errors.
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! [email protected] build: `vue-cli-service build`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the [email protected] build script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     /Users/sunggillee/.npm/_logs/2020-03-19T05_10_45_490Z-debug.log
    

    Expected Behavior

    build success.

    Reply
  • Update @toast-ui to v2.0
    Update @toast-ui to v2.0

    Mar 25, 2020

    Please check if the PR fulfills these requirements

    • [ ] It's the right issue type on the title
    • [ ] When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)
    • [ ] The commit message follows our guidelines
    • [ ] Tests for the changes have been added (for bug fixes/features)
    • [ ] Docs have been added/updated (for bug fixes/features)
    • [ ] It does not introduce a breaking change or has a description of the breaking change

    Description

    Update dependencies

    @toast-ui v2.0 remove instance methods: setValue, getValue so need to change this.editor.getValue to this.editor.getCurrentModeEditor().getValue() just a simple update, need optimize this.


    Thank you for your contribution to TOAST UI product. ? ? ✨

    Reply
  • fix: typo in readme.md (no issue id)
    fix: typo in readme.md (no issue id)

    Mar 30, 2020

    Please check if the PR fulfills these requirements

    • [x] It's the right issue type on the title
    • [x] When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)
    • [x] The commit message follows our guidelines
    • [x] Tests for the changes have been added (for bug fixes/features)
    • [x] Docs have been added/updated (for bug fixes/features)
    • [x] It does not introduce a breaking change or has a description of the breaking change

    Description

    Typo fix


    Thank you for your contribution to TOAST UI product. ? ? ✨

    Reply
  • Error: Cannot read property 'classList' of null when trying to load the editor inside a nested component.
    Error: Cannot read property 'classList' of null when trying to load the editor inside a nested component.

    Apr 5, 2020

    Version

    2.0.1

    Test Environment

    Chrome, Mac OS Catalina

    Current Behavior

    When registering the editor component from within a nested component I get the console error 'Cannot read propertyclassList of null'. The editor loads fine in the parent component, just not the child or grandchild component. The toolbar loads, but no content area.

    My structure is as follows:

    1. Page.vue - Editors works as expected 1.1. PageForm.vue - Editor produces classList error 1.1.1. PageFormTextarea.vue - Editor produces classList error

    Expected Behavior

    I would expect the editor to load for each level of component.

    Reply
  • NPM Install fails with npm ERR! package.json Non-registry package missing package.json: squire-rte@github:sohee-lee7/Squire#b1e0e1031fa18912d233c204cbe7c7fae4a42621
    NPM Install fails with npm ERR! package.json Non-registry package missing package.json: [email protected]:sohee-lee7/Squire#b1e0e1031fa18912d233c204cbe7c7fae4a42621

    Mar 11, 2019

    Version

    Latest from NPM

    Test Environment

    Windows

    Current Behavior

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

    Gives error: npm ERR! code ENOPACKAGEJSON npm ERR! package.json Non-registry package missing package.json: [email protected]:sohee-lee7/Squire#b1e0e1031fa18912d233c204cbe7c7fae4a42621. npm ERR! package.json npm can't find a package.json file in your current directory.

    npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\mstacey\AppData\Roaming\npm-cache_logs\2019-03-11T10_10_15_631Z-debug.log

    All other packages install fine, so it doesn't appear to be a local NPM install issue

    Expected Behavior

    NPM install works

    Reply
  • How can I use exts with Viewer?
    How can I use exts with Viewer?

    Mar 20, 2019

    Version

    @toast-ui/vue-editor 1.0.4 tui-editor 1.3.3

    Test Environment

    Chrome 73.0.3683.75

    Current Behavior

    Editor has options prop, but Viewer does not have options prop so that I cannot define exts to use on Viewer.

    Expected Behavior

    Please add options prop or exts prop to Viewer

    bug 
    Reply
  • "exts" does not work ?

    Jan 29, 2019

    question

    Version

    1.0.3

    Test Environment

    Safari 12.0, macOS Mojave 10.14

    Current Behavior

    I am looking for an option to use exts.

    <template>
      <div id="app">
        <editor v-model="editorText" :options="editorOptions" />
      </div>
    </template>
    
    <script>
    import { Editor } from '@toast-ui/vue-editor'
    
    export default {
      components: {
        'editor': Editor,
      },
      data() {
          return {
              editorText: '# CCC',
              editorOptions: {
                exts: ['scrollSync', 'colorSyntax', 'uml', 'chart', 'mark', 'table'],
              }
          }
      },
    }
    </script>
    

    Thank you.

    question 
    Reply
  • how to switch from the editor to the viewer
    how to switch from the editor to the viewer

    May 23, 2019

    hello since we cannot use the editor and the viewer component in the same window because of the error caused how do we switch from one to the other? Thanks.

    Reply
  • error loading editor
    error loading editor

    May 18, 2019

    hello,

    when i load the component i get this error:

    [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'input' of undefined"
    
    found in
    
    ---> <TuiEditor> at src/Editor.vue
           <Test2> at D:\WebServer\ZeinTekWebServices\liveroot\Merlin Internal Front End\src\pages\tests\Test2.vue
             <App> at D:\WebServer\ZeinTekWebServices\liveroot\Merlin Internal Front End\src\App.vue
               <Root>
    

    I even tried commenting out some of the input statements i found inside the node modules in the folder @toast-ui/vue-editor but it is not affecting the code, everything is working as if the Editor.vue file is being loaded from somewhere else on my pc. It is very strange.

    <template>
    	<div id="landing" class="landing">
    		<h1 class="temptitle">Test - Toast ui editor only</h1>
    		
    		<!-- don't use vmodel and value at the same time -->
    		<editor
    			value="editorText"
    		/>
    		
    	</div>	
    </template>
    
    <script>
    	import Vue from 'vue'
    	import store from '@/store/store.js'
    	import { Editor } from '@toast-ui/vue-editor'
    	
    	export default {
    		data () {
    			return {
    				editorText: 'This is initialValue.',
    			}
    		},
    		
    		props: [
    			//
    		],
    		
    		components: {
    			'editor': Editor,
    		},
    		
    		computed: {
    			
    		},
    		
    		methods: {
    			
    		},
    		
    		created () {
    			//
    		},
    		
    		mounted () {
    			//
    		}
    	}
    </script>
    
    <style>
    	@import '../../packages/css/tui-editor/1.3.0/dist/tui-editor.css';
    	@import '../../packages/css/tui-editor/1.3.0/dist/tui-editor-contents.css';
    	@import '../../packages/css/codemirror/2019-05-17/lib/codemirror.css';
    	
    	.landing {
    		background-color: white;
    		height: 100%;
    	}
    </style>
    
    Reply
  • Nuxt 서버 사이드
    Nuxt 서버 사이드

    Apr 22, 2019

    Version

    1.1.1

    Test Environment

    Nuxt 2.6.2

    Current Behavior

    서버사이드에서 동작 문의 클라이언트단에서는 상관 없는데 서버단에서는 로드를 할 수 없는 것인가요? 아래 코드는 index.vue 페이지 단에서 호출했을 경우 정상적으로 에디터를 로드합니다.

    if(process.client) { require('tui-editor/dist/tui-editor.css'); require('tui-editor/dist/tui-editor-contents.css'); require('codemirror/lib/codemirror.css'); var toastui = require('@toast-ui/vue-editor'); var Editor = toastui.Editor; }

    // Write example code
    

    Expected Behavior

    nuxt.config.js 쪽에서 선언하고 사용하는 방법을 알고 싶습니다.

    Reply