Merge c1ed8aaa6b6df844da65815fb5928c62796a0375 into 6858a9ad67483025f6a9432a926beb9327037be3

package.json

@@ -15,6 +15,7 @@
     "test:ci": "npm run lint && npm run test:unit"
   },
   "dependencies": {
+    "@toast-ui/editor": "^3.1.0",
     "axios": "0.18.1",
     "clipboard": "2.0.4",
     "codemirror": "5.45.0",
@@ -34,7 +35,6 @@
     "screenfull": "4.2.0",
     "script-loader": "0.7.2",
     "sortablejs": "1.8.4",
-    "tui-editor": "1.3.3",
     "vue": "2.6.10",
     "vue-count-to": "1.0.13",
     "vue-router": "3.0.2",

src/components/MarkdownEditor/default-options.js

@@ -7,25 +7,10 @@ export default {
   usageStatistics: false,
   hideModeSwitch: false,
   toolbarItems: [
-    'heading',
+    ['heading', 'bold', 'italic', 'strike'],
-    'bold',
+    ['hr', 'quote'],
-    'italic',
+    ['ul', 'ol', 'task', 'indent', 'outdent'],
-    'strike',
+    ['table', 'image', 'link'],
-    'divider',
+    ['code', 'codeblock']
-    'hr',
-    'quote',
-    'divider',
-    'ul',
-    'ol',
-    'task',
-    'indent',
-    'outdent',
-    'divider',
-    'table',
-    'image',
-    'link',
-    'divider',
-    'code',
-    'codeblock'
   ]
 }

src/components/MarkdownEditor/index.vue

@@ -5,10 +5,9 @@
 <script>
 // deps for editor
 import 'codemirror/lib/codemirror.css' // codemirror
-import 'tui-editor/dist/tui-editor.css' // editor ui
+import '@toast-ui/editor/dist/toastui-editor.css' // editor style
-import 'tui-editor/dist/tui-editor-contents.css' // editor content
 
-import Editor from 'tui-editor'
+import Editor from '@toast-ui/editor'
 import defaultOptions from './default-options'
 
 export default {
@@ -62,8 +61,8 @@ export default {
   },
   watch: {
     value(newValue, preValue) {
-      if (newValue !== preValue && newValue !== this.editor.getValue()) {
+      if (newValue !== preValue && newValue !== this.editor.getMarkdown()) {
-        this.editor.setValue(newValue)
+        this.editor.setMarkdown(newValue)
       }
     },
     language(val) {
@@ -90,10 +89,19 @@ 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())
+      })
+      this.editor.addHook('addImageBlobHook', (file, cb) => {
+        if (typeof this.$listeners.uploadImageEvent === 'function') {
+          this.$emit('uploadImageEvent', file, cb)
+        } else {
+          const reader = new FileReader()
+          reader.onload = ({ target }) => { cb(target.result || '') }
+          reader.readAsDataURL(file)
+        }
       })
     },
     destroyEditor() {
@@ -102,16 +110,16 @@ export default {
       this.editor.remove()
     },
     setValue(value) {
-      this.editor.setValue(value)
+      this.editor.setMarkdown(value)
     },
     getValue() {
-      return this.editor.getValue()
+      return this.editor.getMarkdown()
     },
     setHtml(value) {
-      this.editor.setHtml(value)
+      this.editor.setHTML(value)
     },
     getHtml() {
-      return this.editor.getHtml()
+      return this.editor.getHTML()
     }
   }
 }

src/views/components-demo/markdown.vue

@@ -27,7 +27,7 @@
       <el-tag class="tag-title">
         Customize Toolbar:
       </el-tag>
-      <markdown-editor v-model="content3" :options="{ toolbarItems: ['heading','bold','italic']}" />
+      <markdown-editor v-model="content3" :options="{ toolbarItems: [['heading','bold','italic'], ['image']]}" @uploadImageEvent="uploadImage" />
     </div>
 
     <div class="editor-container">
@@ -86,6 +86,12 @@ export default {
     getHtml() {
       this.html = this.$refs.markdownEditor.getHtml()
       console.log(this.html)
+    },
+    // Custom picture upload
+    uploadImage(file, callback) {
+      const reader = new FileReader()
+      reader.onload = ({ target }) => { callback(target.result || '') }
+      reader.readAsDataURL(file)
     }
   }
 }