vue-element-admin的tui-editor安装问题

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

1.遇到问题

PanJiaChen的vue-element-admin的模板git clone 仓库并install时候,出现长时间安装tui-editor失败

2.解决办法

先将package.json的tui-editor修改为"@toast-ui/editor": "^3.1.3",因为包要进行升级

进入\src\components\MarkdownEditor\index.vue文件 由这个

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 defaultOptions from './default-options'

修改后

import 'codemirror/lib/codemirror.css'\
import '@toast-ui/editor/dist/toastui-editor.css'\
import Editor from '@toast-ui/editor'\
import defaultOptions from './default-options'

再将编辑器的工具栏修改这样的数据格式

  toolbarItems: [
    ['heading', 'bold', 'italic', 'strike'], 
    ['hr', 'quote'], 
    ['ul', 'ol', 'task', 'indent', 'outdent'], 
    ['table', 'image', 'link'], 
    ['code', 'codeblock']
  ]

把一些操作api修改新版本api名, tui-editor也要全部替换为@toast-ui/editor

this.editor.setValue => this.editor.setMarkdown
this.editor.getValue => this.editor.getMarkdown
this.editor.getHtml => this.editor.getHTML
this.editor.remove => this.editor.destroy

最后npm install,祝大家顺利安装启动