D2-Admin使用UEditor

完整版自带Ueditor，我用的是精简版，一步一步逐渐丰富功能组件。

D2-Admin的文档太简单。让生手不知道该怎么操作。https://doc.d2admin.fairyever.com/zh/sys-components/ueditor.html

 

以下为具体操作步骤。

1、安装vue-ueditor-wrap。文档https://github.com/HaoChuan9421/vue-ueditor-wrap

不想看文档的，直接执行命令

npm i vue-ueditor-wrap

2、在src\main.js中引入、注册vue-ueditor-wrap组件。16-17行，31行

// Vue
import Vue from 'vue'
// D2-Crud
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import D2Crud from '@d2-projects/d2-crud'

import i18n from './i18n'
import App from './App'
// 核心插件
import d2Admin from '@/plugin/d2admin'
// store
import store from '@/store/index'

// ！！！！！！！！！！！！！！！！！！这里
// [ 可选组件 ] UEditor
import VueUeditorWrap from 'vue-ueditor-wrap'

// 菜单和路由设置
import router from './router'
import menuHeader from '@/menu/header'
import menuAside from '@/menu/aside'
import { frameInRoutes } from '@/router/routes'

// 核心插件
Vue.use(d2Admin)
// D2-Crud
Vue.use(ElementUI)
Vue.use(D2Crud)
// ！！！！！！！！！！！！！！！！！！这里
Vue.component('VueUeditorWrap', VueUeditorWrap)

 

3、下载D2-Admin完整版，解压，将public\lib这个目录，复制到你项目的相同目录。这个文件是UEditor的资源文件

 

4、D2-Admin完整版中将src\components\d2-ueditor这个目录，复制到你项目的相同目录。这是ueditor这个组件

 

5、src\components\index.js，在这个文件中引入、注册ueditor组件。10行

import Vue from 'vue'

import d2Container from './d2-container'

// 注意 有些组件使用异步加载会有影响
Vue.component('d2-container', d2Container)
Vue.component('d2-icon', () => import('./d2-icon'))
Vue.component('d2-icon-svg', () => import('./d2-icon-svg/index.vue'))
Vue.component('my-tag', () => import('./curd2/tag.vue'))
Vue.component('d2-ueditor', () => import('./d2-ueditor'))

至此，完成。快去测试一下吧

      <el-row>
        <el-col :span="2">商品详情</el-col>
        <el-col :span="22">
          <d2-ueditor v-model="goodsDetailText"/>
        </el-col>
      </el-row>