From c1ed8aaa6b6df844da65815fb5928c62796a0375 Mon Sep 17 00:00:00 2001
From: Wenhsing <wenhsing@qq.com>
Date: Tue, 19 Oct 2021 18:16:54 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0Markdown=E7=BC=96=E8=BE=91?=
=?UTF-8?q?=E5=99=A8=E4=BE=9D=E8=B5=96=E5=88=B03.1.0=20=E8=A7=A3=E5=86=B3M?=
=?UTF-8?q?arkdown=E5=8F=B3=E4=BE=A7=E6=97=A0=E6=B3=95=E6=AD=A3=E5=B8=B8?=
=?UTF-8?q?=E6=98=BE=E7=A4=BABUG=EF=BC=8C=E5=90=8C=E6=97=B6=E6=94=AF?=
=?UTF-8?q?=E6=8C=81=E8=87=AA=E5=AE=9A=E4=B9=89=E7=AC=AC=E4=B8=89=E6=96=B9?=
=?UTF-8?q?=E5=9B=BE=E7=89=87=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
package.json | 2 +-
.../MarkdownEditor/default-options.js | 25 ++++------------
src/components/MarkdownEditor/index.vue | 30 ++++++++++++-------
src/views/components-demo/markdown.vue | 8 ++++-
4 files changed, 32 insertions(+), 33 deletions(-)
diff --git a/package.json b/package.json
index 02f68e23..e2df20d2 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/MarkdownEditor/default-options.js b/src/components/MarkdownEditor/default-options.js
index 303aa13d..4099c81e 100644
--- a/src/components/MarkdownEditor/default-options.js
+++ b/src/components/MarkdownEditor/default-options.js
@@ -7,25 +7,10 @@ export default {
usageStatistics: false,
hideModeSwitch: false,
toolbarItems: [
- 'heading',
- 'bold',
- 'italic',
- 'strike',
- 'divider',
- 'hr',
- 'quote',
- 'divider',
- 'ul',
- 'ol',
- 'task',
- 'indent',
- 'outdent',
- 'divider',
- 'table',
- 'image',
- 'link',
- 'divider',
- 'code',
- 'codeblock'
+ ['heading', 'bold', 'italic', 'strike'],
+ ['hr', 'quote'],
+ ['ul', 'ol', 'task', 'indent', 'outdent'],
+ ['table', 'image', 'link'],
+ ['code', 'codeblock']
]
}
diff --git a/src/components/MarkdownEditor/index.vue b/src/components/MarkdownEditor/index.vue
index 1a8a01ee..7befa98c 100644
--- a/src/components/MarkdownEditor/index.vue
+++ b/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 'tui-editor/dist/tui-editor-contents.css' // editor content
+import '@toast-ui/editor/dist/toastui-editor.css' // editor style
-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()) {
- this.editor.setValue(newValue)
+ if (newValue !== preValue && newValue !== this.editor.getMarkdown()) {
+ 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()
}
}
}
diff --git a/src/views/components-demo/markdown.vue b/src/views/components-demo/markdown.vue
index 25cf3e37..9da61bfd 100644
--- a/src/views/components-demo/markdown.vue
+++ b/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)
}
}
}