vue-element-admin Markdown 输出样式排版问题修复方案

vue-element-admin Markdown 输出样式排版问题修复方案

1.1 事故现场1.2 问题解释1.3 修复解决方案1.3.1 修改package.json1.3.2 修改 src/components/MarkdownEditor/index.vue 1.4 修复效果

1.1 事故现场

最近在使用 vue-element-admin 重构了我们的后台管理系统，然后当在使用Markdown 编辑器的时候发现了Markdown 输出样式有问题。

vue-element-admin 是一款基于Vue2.0 和element-ui 的优秀的后台管理模版框架，使用了最新的前端技术栈。

为了修复这个问题，我在Github 提了一个issue, 然后很快收到了一个热心人的回复。

https://github.com/PanJiaChen/vue-element-admin/issues/3308#event-3727463524

1.2 问题解释

大致意思是vue-element-admin master 分支使用的markdown 编辑器是基于tui.editor 这个库。

Markdown is based on tui.editor ，simply wrapped with Vue. DocumentationOriginally used simplemde-markdown-editor as the markdown editor, but this library has not been updated and maintained for a long time, and there is also the risk of xss. So after the v3.9.3+ version, use tui.editor as the new editor. All the next documents are Based on tui.editor it. More Content.

翻译下就是：

最初使用simplemde-markdown-editor作为markdown编辑器，但是该库很长时间没有更新和维护，并且还存在xss的风险。 因此，在v3.9.3 +版本之后，请使用 tui.editor 作为新编辑器。 接下来的所有文档都基于tui.editor它。

但是tui.editor在后来的版本更新中改名成了@toast-ui/editor

最新版本从2.0 版本开始修复了我们文章开头提到的那个bug.

1.3 修复解决方案

这个PR中已经修复了这个问题，但是主分支没有合并。

1.3.1 修改package.json

把package.json 文件中的依赖

"dependencies": { "tui-editor": "1.3.3", }

替换成

"dependencies": { "@toast-ui/editor": "^2.2.0", }

1.3.2 修改 src/components/MarkdownEditor/index.vue

把src/components/MarkdownEditor/index.vue 中的内容全选替换成我这个即可：

<template> <div :id="id" /> </template> <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' // Editor's Dependency Style import '@toast-ui/editor/dist/toastui-editor.css' // Editor's Style // import Editor from 'tui-editor' 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()) }) }, 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>

1.4 修复效果

效果如下： 本篇完～

技术宅星云 认证博客专家 Java Spring MySQL 技术宅星云（网名），英文名fairy,博客专家,先后曾在外企惠普，央企中航信工作, 目前担任北京蛙跳科技有限公司后端高级开发工程师，负责公司短视频应用后台,擅长JAVA后端技术.