参考文档：1、解决tui-editor布局错误失效问题 2.vue-element-admin Markdown 输出样式排版问题修复方案
问题描述：两年前用vue-element-admin 做的一个后台管理系统，其中使用到了Markdown组件（它封装的是tui-editor）,一直都没出过问题，最近在服务器上重新部署了一套，编辑器就出现问题了。相同的环境，代码也没有修改，部署也没问题，本地是以前的包也没问题，后面发现删除tui-editor包，重新装就浮现了相同的问题。百度了解到tui-editor新版本改名了，改成了@toast-ui/editor，感觉有点无语，就算版本不换，重新install也会出现问题。
以下是百度后总结的两种解决方案：
方案一：直接在node_modules修改tui-editor插件。 步骤：打开node_modules包中的tui-editor文件夹，在js文件中搜索 containerTmpl 变量，将变量中的html自闭合标签改为非闭合标签，下面以下代码可以直接替换。
var containerTmpl = ['<div class="tui-editor">', '<div class="te-md-container">', '<div class="te-editor">', '</div>', '<div class="te-md-splitter" >', '</div>', '<div class="te-preview">', '</div>', '</div>', '<div class="te-ww-container">', '<div class="te-editor">', '</div>', '</div>', '</div>'].join('');
上述方案操作简单快捷，但是不推荐这种方式，以后重新install的还得重新操作一遍，没有根本解决问题。
方案二：采用@toast-ui/editor库。
1、安装@toast-ui/editor包： npm install @toast-ui/editor --save
2、修改 src/components/MarkdownEditor/index.vue（将以前引入的tui-editor相关内容替换成@toast-ui/editor,涉及到的getValue方法getMarkdown,setValue改成setMarkdown）。具体修改如下：
<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>
网友评论