解決 vue-element-admin Markdown 編輯器右側不正常顯示並支援第三方圖片上傳
阿新 • • 發佈:2021-10-20
升級
升級依賴
方法一
直接修改 package.json 檔案,刪除 "tui-editor": "1.3.3",
,新增 "@toast-ui/editor": "^3.1.0",
。修改完成後重新執行安裝依賴。
方法二
直接執行命令:
npm uninstall tui-editor
npm install @toast-ui/[email protected]
檔案修改
- 修改
src\components\MarkdownEditor\index.vue
<template> <div :id="id" /> </template> <script> // deps for editor import 'codemirror/lib/codemirror.css' // codemirror import '@toast-ui/editor/dist/toastui-editor.css' // editor style import Editor from '@toast-ui/editor' import defaultOptions from './default-options' export default { name: 'MarkdownEditor', props: { value: { type: String, default: '' }, id: { type: String, required: false, default() { return 'markdown-editor-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '') } }, options: { type: Object, default() { return defaultOptions } }, mode: { type: String, default: 'markdown' }, height: { type: String, required: false, default: '300px' }, language: { type: String, required: false, default: 'en_US' // https://github.com/nhnent/tui.editor/tree/master/src/js/langs } }, data() { return { editor: null } }, computed: { editorOptions() { const options = Object.assign({}, defaultOptions, this.options) options.initialEditType = this.mode options.height = this.height options.language = this.language return options } }, watch: { value(newValue, preValue) { if (newValue !== preValue && newValue !== this.editor.getMarkdown()) { this.editor.setMarkdown(newValue) } }, language(val) { this.destroyEditor() this.initEditor() }, height(newValue) { this.editor.height(newValue) }, mode(newValue) { this.editor.changeMode(newValue) } }, mounted() { this.initEditor() }, destroyed() { this.destroyEditor() }, methods: { initEditor() { this.editor = new Editor({ el: document.getElementById(this.id), ...this.editorOptions }) if (this.value) { this.editor.setMarkdown(this.value) } this.editor.on('change', () => { 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() { if (!this.editor) return this.editor.off('change') this.editor.remove() }, setValue(value) { this.editor.setMarkdown(value) }, getValue() { return this.editor.getMarkdown() }, setHtml(value) { this.editor.setHTML(value) }, getHtml() { return this.editor.getHTML() } } } </script>
- 修改
src\components\MarkdownEditor\default-options.js
// doc: https://nhnent.github.io/tui.editor/api/latest/ToastUIEditor.html#ToastUIEditor export default { minHeight: '600px', previewStyle: 'vertical', useCommandShortcut: true, useDefaultHTMLSanitizer: true, usageStatistics: false, hideModeSwitch: false, toolbarItems: [ ['heading', 'bold', 'italic', 'strike'], ['hr', 'quote'], ['ul', 'ol', 'task', 'indent', 'outdent'], ['table', 'image', 'link'], ['code', 'codeblock'] ] }
支援第三方圖片上傳
在使用 Markdown 編輯器的位置新增事件監聽 uploadImageEvent
,然後在監聽中進行第三方圖片上傳操作,最後通過在回撥中傳入圖片的地址即可在編輯器中插入對應的圖片。
<template> <div class="markdown"> <markdown-editor v-model="content" :options="{ toolbarItems: [['heading','bold','italic'], ['image']]}" @uploadImageEvent="uploadImage" /> </div> </template> <script> import MarkdownEditor from '@/components/MarkdownEditor' const content = ` **This is test** * vue * element * webpack ` export default { name: 'MarkdownDemo', components: { MarkdownEditor }, data() { return { content: content } }, methods: { // Custom picture upload uploadImage(file, callback) { const reader = new FileReader() reader.onload = ({ target }) => { callback(target.result || '') } reader.readAsDataURL(file) } } } </script>