❤️作者主页：IT技术分享社区
❤️作者简介：大家好,我是IT技术分享社区的博主，从事C#、Java开发九年，对数据库、C#、Java、前端、运维、电脑技巧等经验丰富。
❤️个人荣誉： 数据库领域优质创作者🏆，华为云享专家🏆，阿里云专家博主🏆
❤️个人博客：IT技术分享社区
❤️公众号/小程序：IT技术分享社区 （运营五年）
❤️好文章点赞 👍 收藏 ⭐再看，养成习惯
目录
1、本地安装node
2、克隆vue-element-admin项目
3、处理tui-editor依赖报错
找到package.json 去掉 "tui-editor": "1.3.3"
然后执行单独安装tui-editor
4、安装其它依赖包
5、替换使用tui-editor的内容
6、启动项目
7、运行效果
1、本地安装node
首先本地安装后nodejs，我本地的版本如下：
PS E:\hgm\vue-admin\vue-element-admin> npm -v
6.14.16
PS E:\hgm\vue-admin\vue-element-admin> node -v
v14.19.1
配置淘宝镜像
#配置npm为淘宝镜像
npm config set registry https://registry.npm.taobao.org
#查看配置是否正确
npm config get registry
2、克隆vue-element-admin项目
本地新建文件夹，比如E:\\vue-admin 然后执行命令克隆项目
# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git
克隆之后文档目录如下
3、处理tui-editor依赖报错
找到package.json 去掉 "tui-editor": "1.3.3"
路径：vue-element-admin的根目录
原因：tui-editor（富文本编辑器插件）更名造成的，现在已经改名为toast-ui/editor并且该文件名和方法名都进行可修改，所以需要手动处理。
修改内容如下：
然后执行单独安装tui-editor
因为vue-element-admin项目依赖tui-editor ,手动执行命令安装就行
npm install --save @toast-ui/vue-editor
4、安装其它依赖包
因为依赖包比较多，安装需要几分钟，大家耐心等几分钟。
npm install
注意：不要使用cnpm命令安装依赖包，会出现各种依赖问题。
5、替换使用tui-editor的内容
路径：E:\vue-admin\vue-element-admin\src\components\MarkdownEditor\index.vue
修改后的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 Editor from '@tui-editor'
//替换为新的
import '@toast-ui/editor/dist/toastui-editor.css';
import Editor from '@toast-ui/vue-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()
},
setMarkdown(value) {
this.editor.setMarkdown(value)
},
getMarkdown() {
return this.editor.getMarkdown()
},
setHtml(value) {
this.editor.setHtml(value)
},
getHtml() {
return this.editor.getHtml()
}
}
}
</script>
修改内容：
导入的包
import '@toast-ui/editor/dist/toastui-editor.css';
import Editor from '@toast-ui/vue-editor'
index.vue 中方法替换
getValue和setValue分别换成getMarkdown和setMarkdown
6、启动项目
执行启动命令
npm run dev
说明：警告信息不影响正常启动
7、运行效果
登录界面
主界面
