init

src/components/MarkdownEditor/index.vue

@@ -4,11 +4,16 @@
 
 <script>
 // deps for editor
-import 'codemirror/lib/codemirror.css' // codemirror
-import 'tui-editor/dist/tui-editor.css' // editor ui
-import 'tui-editor/dist/tui-editor-contents.css' // editor content
+// import 'codemirror/lib/codemirror.css' // codemirror
+// import 'tui-editor/dist/tui-editor.css' // editor ui
+// import 'tui-editor/dist/tui-editor-contents.css' // editor content
 
-import Editor from 'tui-editor'
+// import Editor from 'tui-editor'
+// import defaultOptions from './default-options'
+
+import 'codemirror/lib/codemirror.css'
+import '@toast-ui/editor/dist/toastui-editor.css'
+import Editor from '@toast-ui/editor'
 import defaultOptions from './default-options'
 
 export default {
@@ -62,8 +67,8 @@ export default {
   },
   watch: {
     value(newValue, preValue) {
-      if (newValue !== preValue && newValue !== this.editor.getValue()) {
-        this.editor.setValue(newValue)
+      if (newValue !== preValue && newValue !== this.editor.getMarkdown()) {
+        this.editor.setMarkdown(newValue)
       }
     },
     language(val) {
@@ -90,10 +95,10 @@ export default {
         ...this.editorOptions
       })
       if (this.value) {
-        this.editor.setValue(this.value)
+        this.editor.setMarkdown(this.value)
       }
       this.editor.on('change', () => {
-        this.$emit('input', this.editor.getValue())
+        this.$emit('input', this.editor.getMarkdown())
       })
     },
     destroyEditor() {
@@ -101,11 +106,11 @@ export default {
       this.editor.off('change')
       this.editor.remove()
     },
-    setValue(value) {
-      this.editor.setValue(value)
+    setMarkdown(value) {
+      this.editor.setMarkdown(value)
     },
-    getValue() {
-      return this.editor.getValue()
+    getMarkdown() {
+      return this.editor.getMarkdown()
     },
     setHtml(value) {
       this.editor.setHtml(value)