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>